2011-12-18 253 views
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 
<script type="text/javascript" src="jquery.js"></script> 


    <script type="text/javascript"> 

    function buttonClicked(e) 
    { 

    alert(e.data.color); 
    } 

jQuery('#but1').bind('click',{color:'red'},buttonClicked); 
    jQuery('#but2').bind('click',{color:'blue'},buttonClicked); 
</script> 
</head> 



<body> 

<br/><br/><br/><br/> 
    <div align="center"> 
    <form action="" method="get"> 

    <input id="but1" type="button" value="Red" /> 
    <input id="but2" type="button" value="Blue" /> 
    </form> 
    </div> 


</body> 
</html> 

警报不会触发click.why是什么?jquery不会触发事件

回答

1

这工作:

function buttonClicked(e) { 
    alert(e.data.color); 
} 

$(document).ready(function(){ 
    jQuery('#but1').bind('click',{color:'red'},buttonClicked); 
    jQuery('#but2').bind('click',{color:'blue'},buttonClicked); 
}); 

http://jsfiddle.net/RTXxY/

+0

为什么它不的文件准备工作外 – 2011-12-18 06:09:07

+0

因为你选择的元素尚未公布,如果点击处理程序的设置元素下降之前的标记。在页面被解析的时候,元素可以被DOM使用; '$(document).ready()'等待页面完全解析并准备就绪。 – 2011-12-18 06:09:36

+0

查看'ready()'函数的文档:http://api.jquery.com/ready/ – canon 2011-12-18 06:18:10

1

上面的脚本放置在定义元素的位置,因此代码执行时没有任何可绑定的元素。最简单的解决方案是只在文档准备就绪时执行脚本。

jQuery(function($) { 
    $('#but1').bind('click',{color:'red'},buttonClicked); 
    $('#but2').bind('click',{color:'blue'},buttonClicked); 
}