对委托事件使用.on()方法

$('#staticParent').on('click', '.dynamicElement', function() {
    // Do something on an existent or future .dynamicElement
});

.on()方法允许你将任何想要的事件处理程序委托给: 当前元素或将来添加到DOM的元素。

注:不要使用.live()!从jQuery 1.7+开始，.live()方法已弃用。

Jquery .on的工作可以，但我有一些问题的渲染实现上面的一些解决方案。我使用.on的问题是，它在某种程度上呈现的事件不同于.hover方法。

只是供其他可能也有这个问题的人参考。我通过为动态添加的项目重新注册悬浮事件来解决我的问题:

重新注册悬停事件，因为悬停对动态创建的项目不起作用。 所以每次我创建新的/动态项目时，我都会再次添加悬停代码。完美的作品

$('#someID div:last').hover(
    function() {
       //...
    },
    function() {
       //...
    }
);

您正在使用的click()绑定称为“直接”绑定，它只会将处理程序附加到已经存在的元素上。它不会与将来创建的元素绑定。为此，您必须使用on()创建一个“委托”绑定。

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。

源

以下是你想要的:

Var计数器= 0; $("按钮").click(函数(){ 美元(h2)。追加(“< p class = '测试' >点击我”+(+ +计数器)+ " < / p > ") })； // on(): 美元(h2)。On ("click"， "p.test"， function(){ 警报($(这)。text ()); })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js " > < /脚本> < h2 > < / h2 > 生成新的元素</button>

以上内容适用于使用jQuery 1.7+版本的用户。如果你使用的是旧版本，请参考下面之前的答案。

之前的回答:

尝试使用live():

$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});   


$(".test").live('click', function(){
    alert('you clicked me!');
});

为我工作。尝试用jsFiddle。

或者用delegate()有一种新奇的方法:

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

更新的jsFiddle。

我在jQuery的文档中找到了两个解决方案:

首先:在Body或Document上使用委托

例句:

 $("body").delegate('.test', 'click', function(){
 ...
  alert('test');
 });

Why?

答:根据一组特定的根元素，为现在或将来与选择器匹配的所有元素附加一个或多个事件处理程序。 链接:http://api.jquery.com/delegate/

第二步:将你的函数放在"$(document)"中，使用"on"并将它附加到你想要触发这个函数的元素上。 第一个参数是“事件处理器”，第二个参数是元素，第三个参数是函数。 例句:

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

Why?

Answer: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next ... link: https://api.jquery.com/on/

我正在使用表动态地添加新元素，当使用on()时，使它为我工作的唯一方法是使用一个非动态的父作为:

<table id="myTable">
    <tr>
        <td></td> // Dynamically created
        <td></td> // Dynamically created
        <td></td> // Dynamically created
    </tr>
</table>

<input id="myButton" type="button" value="Push me!">

<script>
    $('#myButton').click(function() {
        $('#myTable tr').append('<td></td>');
    });

    $('#myTable').on('click', 'td', function() {
        // Your amazing code here!
    });
</script>

这非常有用，因为要删除与on()绑定的事件，可以使用off()，而要使用一次事件，可以使用one()。

.live函数工作得很好。

它用于向舞台动态添加元素。

$('#selectAllAssetTypes').live('click', function(event){
                    alert("BUTTON CLICKED");
                    $('.assetTypeCheckBox').attr('checked', true);
                });

干杯, Ankit。