操作 jQuery 添加的元素答案

【问题标题】：Manipulating elements added by jQuery操作 jQuery 添加的元素
【发布时间】：2014-05-10 20:53:26
【问题描述】：

我正在向 DOM 动态添加一些元素。

我想用 jQuery 的 .click() 函数来操作这些元素。但不知何故，DOM 不会为动态添加的元素触发 .click() 事件，它仅适用于 jQuery 未添加的其他元素。

知道为什么吗？

【问题讨论】：

【解决方案1】：

这是一个简单的事件委托案例，意味着页面上动态添加的元素上的直接事件绑定不会在您的案例中获得事件click，因此您需要遵循事件委托的特定语法，例如：

$(staticParent).on(event, selector, callback);

这里staticParent是最近的父元素，它包含动态添加的元素，可以是div, table, form etc.事件是像click这样的事件，选择器是上下文中元素的类名或id，回调是事件发生时必须运行的函数。

尽管$(document) 始终可用于委派活动。所以你可以这样做：

$(document).on('click', '.myElem', function(){
    alert('clicked.');
});

【讨论】：

感谢@Jai，它运行良好，我非常了解；)
欢迎您@Youssef。很高兴这对您有所帮助。

【解决方案2】：

Ad Jai 已经说过您需要事件委托。在 jQuery 中，这可以通过 on 进行： http://api.jquery.com/on/ 我为你写了这个小例子：

$(document).on("click", "input[type='button']", function() {
    alert("clicked");
});

// add two buttons 
$("<input/>", {
    type: "button",
    value: "button"
}).appendTo("#buttonsHolder");

$("<input/>", {
   type: "button",
   value: "button"    
}).appendTo("#buttonsHolder");

这里正在运行 jsFiddle： http://jsfiddle.net/zono/DXqWe/

【讨论】：

【解决方案3】：

根据我的经验，您需要在动态添加元素后添加点击处理程序。如果在动态添加的元素之前绑定了click函数，那么新的元素就没有click函数了。

【讨论】：

查看 .on() 的事件委托语法。