dynamic - jQuery动态生成的内容 - 点击不起作用

Question

我有一个页面，可以在其中动态添加 div，例如：

$(divCol).insertAfter(parentNewRow.children('.edCol:last'));

这会在最后一个 div 之后插入另一个重复的.edColdiv。一切都很好，除了使用新的.edColdiv 时，所有按钮都不再起作用了。所有在原始 div 上完美运行的 jQuery 函数现在什么都不做。新 div 中的代码相同，所有类都相同，等等，但没有任何效果。

显然我错过了一些东西。任何人都可以对此有所了解吗？任何帮助将非常感激。

Answer 1

jQuery 文档表明live()已弃用，您应该使用该on()函数。

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

这是一个你可以在这个fiddle中看到的例子。

$(function() {
    $('#container').on('click', 'div', function() {
        console.log('clicked');
    });

    $('#container').append($('<div>BLE</div>'));
});​

以及随之而来的 HTML：

<div id="container">
    <div>BLA</div>
</div>​

---

编辑

on()请查看以下小提琴，这是一个更完整的示例，可能会澄清您对该方法的使用方式的疑问： DEMO。

HTML

<div id="container">
    <div>
        First you have these buttons with the bound click handler<br/>
        <button>One</button><br/>
        <button>Two</button><br/>
        <button>Three</button><br/>
    </div>
</div>
<hr/>
<button id="load-btn">Click this button to load the buttons below in the &lt;div&gt; above</button>
<hr/>
<div id="content">
    <div>
        These buttons are going to be loaded above.<br/>
        <button>Four</button><br/>
        <button>Five</button><br/>
        <button>Six</button><br/>
    </div>    
</div>

​JS

$(function() {
    // Bind click handler to the #load-btn which will
    // dynamically load the lower div content inside the upper div.
    $('#load-btn').on('click', function() {
        $('#container').append($('#content').html());
    });

    // Bind another click handler to all <button>s that exist at the moment
    // and that could be added dynamically inside the #container element.
    $('#container').on('click', 'button', function() {
        console.log('button ' + $(this).html() + ' clicked.');
    });
});​

Answer 2

使用 jQuery 的 live() 方法。描述：为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

参考：http ://api.jquery.com/live/

$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});

Answer 3

使用“实时”绑定，您将来也可以将事件附加到元素。

$('a').live('click' , function() {
    alert('clicked');
});

Answer 4

$(document).on("click", ".my_Class", function (e) {
        alert("Works Fine");
    });