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

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

^源

以下是您要查找的内容：

var counter = 0;

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

// With on():

$("h2").on("click", "p.test", function(){
    alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</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。

您需要使用 .live 才能正常工作：

$(".test").live("click", function(){
   alert();
});

或者，如果您使用的是 jQuery 1.7+，请使用 .on：

$(".test").on("click", "p", function(){
   alert();
});

改变

 $(".test").click(function(){

自

 $(".test").live('click', function(){

现场演示

jQuery .live（）

Try 或.live().delegate()

http://api.jquery.com/live/

http://api.jquery.com/delegate/

您的元素是在方法之后添加的，因此它没有附加事件。Live 和 Delegate 将该事件触发器提供给检查其子元素的父元素，因此之后添加的任何内容仍然有效。我认为 Live 会检查整个文档正文，而 Delegate 可以赋予元素，因此 Delegate 效率更高。.test.click()

更多信息：

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

您遇到的问题是，您尝试将“test”类绑定到事件，然后才发现 .尽管这看起来都是动态的，但实际发生的是，当函数触发时，传递并连接单击事件，这发生在您在按钮事件中创建“单击我”之前。DOMJQueryDOMready()

通过将 “test” Click 事件添加到 “button” click 处理程序中，它将在 中存在正确的元素后将其连接起来。DOM

<script type="text/javascript">
    $(document).ready(function(){                          
        $("button").click(function(){                                  
            $("h2").html("<p class='test'>click me</p>")                          
            $(".test").click(function(){                          
                alert()                          
            });       
        });                                     
    });
</script>

使用（正如其他人指出的那样）是另一种方法，但我觉得指出 JS 代码中的小错误也是一个好主意。你写的没有错，只是需要正确的范围。掌握 和 JS 的工作原理是许多传统开发人员需要解决的棘手问题之一。live()DOM

live()是一种更清洁的处理方法，在大多数情况下是正确的方法。它本质上是在观察事物并在其中的元素发生变化时重新布线。DOM

.live 函数效果很好。

它用于动态添加到舞台上的元素。

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

干杯 安基特。

将 jQuery 的 .on（） 方法与委托事件一起使用

$(".staticParent").on("click", ".dynamicChild", function(evt) {
  // Existent or future .dynamicChild element was clicked

  console.log($(this));            // $ Object {.dynamicChild}
  console.log(this);               // Element .dynamicChild
  console.log(evt.currentTarget);  // Element .dynamicChild
  console.log(evt.target);         // Element .dynamicChild or any descendant
  console.log(evt.delegateTarget); // Element .staticParent delegator
});

.on（） 方法允许您将任何所需的事件处理程序委托给：
当前元素或以后添加到 DOM 的未来元素。

附加通知：从 jQuery v1.7+ 开始，该方法优先于已弃用的 ..on().live()

JavaScript 中的事件委派

作为技术参考，以下是使用纯 JavaScript 正确实现事件委派的方法：

document.querySelectorAll(".staticParent").forEach((elStaticParent) => {
  elStaticParent.addEventListener("click", (evt) => {
    const elDynamic = evt.target.closest(".dynamicChild");
    if (!elDynamic) return; // .dynamicChild not clicked. Do nothing.

    // Existent or future .dynamicChild element was clicked

    console.log(elDynamic);         // Element .dynamicChild
    console.log(evt.target);        // Element .dynamicChild or any descendant
    console.log(evt.currentTarget); // Element .staticParent delegator
  });
});

对于从 jQuery 切换到纯 JavaScript 的开发人员来说，Event 参数（在上面的例子中）的差异经常令人困惑。 在jQuery中是一个构造的自定义对象，它提供了一些属性，例如可以轻松访问委托事件（以及许多其他事件）的静态父级。在 JavaScript 中，参数不提供此类属性。相反，您可以使用以下命令访问它（这在jQuery中也有所不同）。
在 JavaScript 中（目前仍在使用），我们需要添加一个额外的检查（通常作为语句）来检测接收 Event 的所需动态子项，这是通过使用 .如果检索到这样的元素，这意味着它自己、它的子元素或任何更深层次的后代都冒泡了这样的事件。在将 Event 分配给元素时，这种方法至关重要，例如： ，即使指针的目标是按钮的图标 Element，它也能确保正确通过检查。
一些实现建议使用 i.e： 从长远来看，这很容易出现错误（将子元素添加到动态元素并观察您的 JS 失败）。对于同样错误和不准确的建议也是如此。
在不深入技术细节的情况下，请确保了解差异，以便构建坚如磐石的实现。evt$.EventdelegateTargetEventEvent.currentTargetifEvent.target.closest("someSelector")<button class="dynamicBtn" type="button">Click me <i class="icon-star"></i></button>evt.target && evt.target.matches("someSelector")const elDynamicBtn = evt.target; // Your dynamic element

Jquery工作正常，但我在实现上述一些解决方案的渲染时遇到了一些问题。我使用 的问题是，它以某种方式呈现事件与方法不同。.on.on.hover

仅供参考，对于可能也有问题的其他人。我通过为动态添加的项目重新注册悬停事件来解决我的问题：

重新注册 Hover 事件，因为 Hover 不适用于动态创建的项。 因此，每次创建新/动态项目时，我都会再次添加悬停代码。完美工作

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

我正在使用动态向它们添加新元素的表，并且在使用 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（）。

在 js 文件中添加此函数。 它将适用于每个浏览器

$(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mydiv'>Div</div>

$(.surrounding_div_class).on( 'click', '.test', function () {
alert( 'WORKS!' );
});

仅当类为 .surrounding_div_class 的 DIV 是对象 .test 的直接父级时才有效

如果 div 中有另一个对象将被填充，它将不起作用。

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

第一：在正文或文档上使用委托

例如：

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

为什么？

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

第二：将 your 函数放在 “$（ document ）” 处，使用 “on” 并将其附加到要触发此函数的元素。 第一个参数是“事件处理程序”，第二个参数是元素，第三个参数是函数。 例如：

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

为什么？

答：事件处理程序仅绑定到当前选定的元素;在代码调用 .on（） 时，它们必须存在于页面上。若要确保元素存在且可以选择，请在文档就绪处理程序中对页面上 HTML 标记中的元素执行事件绑定。如果要将新 HTML 注入到页面中，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述... 友情链接： https://api.jquery.com/on/

另一种更简洁的替代方法（恕我直言）是使用原始 javascript 函数来响应单击事件，然后根据需要将目标元素传递回 jQuery。这种方法的优点是，您可以在任何位置动态添加元素，并且单击处理程序将“正常工作”，并且您无需担心将控制权委托给父元素等。

步骤1： 更新动态 html 以触发 onclick 事件。请务必将“event”对象作为参数传递

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

步骤2： 创建测试函数以响应单击事件

    function test(e){
        alert();
    });

可选步骤3： 鉴于您使用的是jQuery，我假设获取对源按钮的引用会很有用

    function test(e){
        alert();

        // Get a reference to the button
        // An explanation of this line is available here
        var target = (e.target)? e.target : e.srcElement;

        // Pass the button reference to jQuery to do jQuery magic
        var $btn = $(target);

    });

我无法上线或委派在灯箱 （tinybox） 中处理 div。

我通过以下简单方法成功使用了 setTimelout：

$('#displayContact').click(function() {
    TINY.box.show({html:'<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>', close:true});
    setTimeout(setContactClick, 1000);
})

function setContactClick() {
    $('#contactSubmit').click(function() {
        alert($('#contactText').val());
    })
}

使用委派对动态生成的内容应用事件的最佳方式。

$(document).on("eventname","selector",function(){
    // code goes here
});

所以你的代码现在是这样的

$(document).on("click",".test",function(){
    // code goes here
});

原因：

在 jQuery 中，Click（） 事件直接绑定，仅当页面上存在特定元素（Html 代码）时（页面加载后），才会将事件处理程序附加到元素。

动态元素是在javascript或jquery（不是Html）的帮助下创建的。

它不会考虑在页面加载后创建的未来元素（动态）。

因此，正常的点击事件不会在动态元素上触发。

溶液：

为了克服这个问题，我们应该使用 on（） 函数。on（） 可以为当前和将来的元素委托事件。

委托事件的优点是可以将处理程序附加到将来添加到文档中的元素。

注意：delegate（），live（） 和 on（） 函数比 DOM 元素具有优势。从 JQuery 1.7 开始，delegate（） 和 live（） 已被弃用（不要使用它们）。

on（） only 可以为当前和将来的元素委托事件。

所以，你的代码应该是这样的

从 $（document）.ready 中删除代码：

$(".test").click(function(){

  alert();

});

更改为：

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

  alert('Clicked');

});

您可以在单击时添加动态创建的元素。示例如下。使用 When 来确保其完成。在我的示例中，我抓取了一个带有类扩展的 div，添加了一个“单击以查看更多”范围，然后使用该范围隐藏/显示原始 div。

$.when($(".expand").before("<span class='clickActivate'>Click to see more</span>")).then(function(){
    $(".clickActivate").click(function(){
        $(this).next().toggle();
    })
});

如果您有一个指向某个容器或正文的二元链接：

var newLink= $("<a></a>", {
        "id": "approve-ctrl",
        "href": "#approve",
        "class": "status-ctrl",
        "data-attributes": "DATA"
    }).html("Its ok").appendTo(document.body);

您可以获取其原始 JavaScript 元素并向其添加事件侦听器，例如单击：

newLink.get(0).addEventListener("click", doActionFunction);

无论您添加多少次这个新的链接实例，您都可以像使用 jquery 函数一样使用它。click

function doActionFunction(e) {
    e.preventDefault();
    e.stopPropagation();

    alert($(this).html());
}

因此，您将收到一条消息，上面写着

没关系

它比其他替代品具有更好的性能。

额外：您可以避免使用jquery并使用纯javascript来获得更好的性能。如果您使用的是 IE 版本8，则应使用此 polyfill 来使用该方法addEventListener

if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }

您也可以使用 inside 元素onclick="do_something(this)"

使用“on”，因为单击会绑定到已经存在的元素。

例如

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

这将有所帮助。