Question

我有一个名为okbutton的按钮。

回调函数绑定到页面加载期间okbutton的click事件

$('#okbuttonid').bind('click',function() { alert('here'); })

我第一次点击“确定”按钮时会发出一次警报。如预期的那样。

当我点击下一次它发出两次警报时，第三次它会提醒三次，然后继续。同样适用于$('#okbuttonid').click = function() { alert('here'); }

但是

当我这样做时

document.getElementById('okbuttonid').onclick = function() { alert('here'); }

它只发出一次警报。每次点击它只会发出一次警报。

何时使用bind事件。

它就像警报被称为我们绑定其事件的次数。

为什么会这样？

我们必须在每次绑定时删除。

我应该使用原生事件样式而不是绑定吗？

本机事件绑定运行良好，但我想知道这个jquery绑定做了什么

我在Nick Craver的第一个回答后编辑/添加以下内容

我有一个需要更改状态选项的列表（共有4个选项）。
我显示一个更改状态链接，当点击该链接时，会显示状态框和位于更改状态链接上方的确定按钮。
我将其显示为工具提示弹出窗口。
在显示statuschange弹出窗口时，我将okbutton onclick附加到一个函数，该函数在被点击时发送一个ajax请求。
以上是我的情景。

为此我不想使用document.ready

我的代码如下所示

<div id='statusdiv' style='display:none; position:absolute;'><!-- and more styles -->
<select><!-- list of options --></select>
<input id='okbutton' value='OK'>
</div>

当用户点击changestatus链接时，我会显示此div并绑定okbutton点击事件的回调。

这个html部分可能是完全动态的，因此没有内联事件附加。

function changestatus()
{
   //display the statusdiv absolutely above the mouse event triggered place
   $('#okbutton').bind('click',function() {
     //ajax request
   })
}

本机事件绑定运行良好，但我想知道这个jquery绑定做了什么

Answer 1

$(function() {
  $('#okbuttonid').bind('click',function() { alert('here'); })
});

很好，因为okbutton已经在DOM中了。

试

$(function() {
  $('#okbuttonid').live('click',function() { alert('here'); })
});

将事件绑定到文档，click事件冒泡到文档并触发函数

更好的方法是使用委托：

$(function() {
  $('#parentOfokbutton').delegate('#okbutton','click',function() { alert('here'); })
});

这会将事件绑定到'parentOfokbutton'，这与'live'函数几乎相同，但事件不必冒泡DOM

如果你仍然想使用bind函数（出于某种原因）预先添加一个unbind方法：

$(function() {
     $('#okbuttonid').unbind('click').bind('click',function() { alert('here'); })
});

Answer 2

您正在附加多个事件处理程序，每个.bind()调用一次，只是不要多次调用它：

$('#okbuttonid').bind('click',function() { alert('here'); })

你不会收到多个警报......只需在document.ready上调用一次，例如：

$(function() {
  $('#okbuttonid').bind('click',function() { alert('here'); })
});

jquery bind / click vs document.onclick - 多次调用bind回调

2 个答案: