Question

我有一个页面，我在div中动态添加，如下：

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

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

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

Answer 1

jQuery文档表明{@ 1}}已弃用，您应使用on()函数。

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来附加事件处理程序。旧版jQuery的用户应该使用 .delegate（）优先于.live（）。

以下是您可以在此fiddle中查看的示例。

live()

与之相关的HTML：

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

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

修改

请查看以下小提琴，这是一个更完整的示例，可能会澄清您对如何使用<div id="container"> <div>BLA</div> </div>方法的疑虑：DEMO。

<强> HTML

on()

<强> JS

<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 <div> 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>

Answer 2

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

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

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

Answer 3

使用'live' binding您也可以在将来将事件附加到元素。

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

Answer 4

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

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

4 个答案: