如何在 jQuery 中使用 .live 绑定多个事件？

Question

我有一个包含两个事件的输入文本，我动态地克隆了它几次。为了正确绑定此元素，我使用：

注意：此输入文本具有 focusin 和 focusout 事件。

$('[selector_input]').die().live( 'focusin', function() {
       alert( 'You focused me' );
});

$('[selector_input]').die().live( 'focusout', function() {
       alert( 'Bye!' );
});

最终结果是所有输入仅执行：focusout 事件。如果我不使用 .die()，我将重复调用相同的事件。

现在的解决方案可能是：

$('[selector_input]').die().live( 'focusout focusin', function(event) {
    if (event.type == "focusin")
       alert( 'You focused me' );
    else
       alert( 'Bye!' );
});

但我喜欢第一个代码的独立性。

Answer 1

只需指定调用 die() 的事件类型即可，但

$('[selector_input]').die('focusin').live( 'focusin', function() {
   alert( 'You focused me' );
});

$('[selector_input]').die('focusout').live( 'focusout', function() {
   alert( 'Bye!' );
});

我不太确定为什么需要 die() 调用，您是否重复绑定事件？

Answer 2

您可以执行类似的操作

$('path to your input').live({
    focusin: function() { $('some output div').html('Focus!'); },
    focusout: function() { $('some output div').html('Bye!'); }
});

，或者您可以删除 .die() ——它的真正目的是删除该选择器以前的事件处理程序。

如果您正在使用警报框，我不会同时扰乱焦点事件 - 警报框出现时会成为活动的东西，导致聚焦的东西失去焦点（然后可能重新聚焦），并导致您的事件有时会无限地调用处理程序。

顺便说一句，请参阅 http://jsfiddle.net/9pjWa/ 了解如何使用 的示例。 live()——听起来你做错了。 .live() 的要点是，您不需要在每次添加元素时重新绑定事件；事件处理程序位于文档上，而不是元素上，并且与选择器匹配的每个元素都可以触发事件，无论它们是在.live()之前还是之后添加的。事实上，每次重新绑定时，您都会添加另一个事件处理程序来处理所有匹配元素，这也是您看到事件处理程序被多次调用的另一个原因。