jquery - 用 on() 替换 live()

Question

从文档

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

我正在使用 jQuery 1.7.1

这适用于静态元素和动态加载的元素：

$("input").live("change", function () { alert("hello"); });

这不起作用，甚至对于静态元素也不起作用：

$("document").on("change", "input", function () { alert("hello"); });

我错过了什么？

Answer 1

像这样写

$(document).on("change", "input", function () { alert("hello"); });

您可以替换为始终存在的document任何内容以获得更好的性能。喜欢closer parent elementDOM

$('#closest_static_container_id').on("change", "input", function () { 
     alert("hello"); 
});

如果您使用$("document")jQuery 将搜索node/tag命名为documentlike<document>并且不会找到任何document实际的object.

但是你可以使用$("body")asbody的节点/元素DOM。

Answer 2

改变：

$("document").on(...)

至：

$(document).on("change", "input", function () { alert("hello"); });

document是一个对象（ 的一个属性window），而不是一个节点类型。

$("document").on(...)

正在寻找对象<document>中的元素document，例如：

<document>

正如你现在可能得到的那样，没有...

无论如何，最好的做法on是使用最接近动态添加元素的静态元素，例如：

<div id='container-div-id'>
    <input />  ... this will be added later.
</div>

$('#container-div-id').on("change", "input", function () {
     alert("hello"); 
 });

Answer 3

document是一个对象，您将其用作字符串。所以jQuery将尝试将其用作 css 选择器，它不会找到任何附加事件处理程序的东西。

尝试这个。

$(document).on("change", "input", function () { alert("hello"); });