用jquery.on（）替换jquery.live（）不起作用

Question

我有几个在ajax调用后动态添加的文本框。这些框与使用.live（）的事件处理程序绑定，目前工作正常。我想用更新的.on（）函数替换它。

这就是我所拥有的

$('.MyTextBox').live({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
});

当我用.on（）替换.live（）时，它不起作用;文本框在添加后不会显示正常行为。

如果我写$('#MainDiv .MyTextBox').live({...，其中MainDiv是发生所有操作的顶级DOM元素，也没有任何反应。

我错过了什么？

由于

Answer 1

以下是他们的例子，但代表是：

http://jsfiddle.net/HDtz3/

vs非代表： http://jsfiddle.net/HDtz3/1/

这就是我讨厌新语法的原因。

在你的手中只需：

$('#MainDiv').on({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
}, '.MyTextBox');

它应该有效

Answer 2

tl; dr ：对于直接交换替换（动态加载帐户），请参阅下面的常规示例。

---

正如其他海报所述，接受的答案有效，但$(#MainDiv')需要"non-dynamic element (not being loading again through ajax)"。这在性能方面是优选的，因为冒泡“距离”的事件是有限的。在这个例子中，它只需要冒泡到它的父元素来处理。

解决方案是绑定到不会重新加载的“父级”元素（通常通过AJAX） - 在示例中，您需要绑定到$('#MainDiv')的父级。

然而，

如果你做想要live()的直接交换替换，你需要做的只是绑定到document元素。

通用示例

格式1：

//Replace:
$(selector).live(events, handler);           // Where `events` is a string

//With:
$(document)  .on(events, selector, handler); 

格式2：

//Replace:
$(selector).live(events);                    // Where `events` is 
                                             //   an object of `handler`s
//With:                                      //   (as in OP's example)
$(document)  .on(events, selector);

<子>

请注意，使用on()示例，selector的容器可以更改，绑定将自动应用;与live()具有相同的功能。

OP的例子（格式2）

//Deprecated live() version:
$('.MyTextBox').live({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
});

//New on() version
$(document).on({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
},'.MyTextBox');

Answer 3

Aaron，Matt，我认为您的选择器输入顺序错误（live转换），请查看on - http://api.jquery.com/on/#example-7 <的API文档/ p>

$("body").on("click", "p", function(){
  //stuff
});

当我尝试你的方法（我来到这里寻找更新我的核心版本的解决方案）时，会出现控制台错误（1.8,1.9和2.0）。目标元素应该是第二个参数而不是最后一个。不确定为什么你的答案被接受，因为它不起作用。希望这会有所帮助。