jQuery-jquery bind绑定事件问题
1、$("#a").bind('click',function(){alert($(this).html())});//正常
2、$("#b").bind('click',showtest('showtest'));//直接就执行showtest函数了，绑定失败
showtest是定义的一个函数，为什么第二种绑定就有问题呢
以下是代码：
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showtest(con){
alert(con);
}
$(function(){
$("#a").bind('click',function(){alert($(this).html())});
$("#b").bind('click',showtest('showtest'));
})
//-->
</SCRIPT>
<body>
<div id="a" style="width:200px;height:200px">aaaaaa</div>
<div id="b">bbbbbb</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showtest(con){
alert(con);
}
$(function(){
$("#a").bind('click',function(){alert($(this).html())});
$("#b").bind('click',function(){showtest('showtest')});
})
//-->
</SCRIPT>
<body>
<div id="a" style="width:200px;height:200px">aaaaaa</div>
<div id="b">bbbbbb</div>
第二个 $("#b").bind('click',showtest('showtest')); ，这里相当与调用函数showtest() ,在js开始解析的时候认为showtest('showtest')是调用函数。正确的写法应该是不加括号的。jquery 是通过apply的方式调用回调函数的，只传入函数名就可以了，调用类似
showtest.apply(this)
第二种绑定方法，第二个参数是要传给被调用函数的参数，第三个参数是被调用的函数名（不带括号和参数）。
$("#b").bind('click',{con:'showtest'},showtest);
function showtest(event){
var con = event.data.con;
alert(con);
}
研究一下jquery的源码你就明白了，你二种情况其实是把函数的结果绑定到click事件上面，修改一下你的showtest函数就可以了
function showtest(con) {
return function(){alert(con);}
}
jquery中bind函数如下：
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
从中可以看出它其实是调用的on函数，源码你可以参照jquery，只要把上面的data和fn两个参数输出来，你就会明白为什么第二种绑定失败了
如果只需要简单的在处理函数中使用event对象，可以这样绑定
function showtest(event){
alert(event.type);
}
$("#b").bind('click',showtest);
//------------- -------------- --------------
// 如果还要传入其他数据，可以利用第二个参数传入
// 例子：http://jsfiddle.net/w3dK3/9/
var message = 'Spoon!';
var clickHandler = function(event) {
alert(event.data);
}
$('#foo').bind('click', [message, 1], clickHandler);
// $('#foo').bind('click', {msg:message}, clickHandler);
// $('#foo').bind('click', message, clickHandler);
相关API:http://www.css88.com/jqapi-1.5/#p=bind