由动态生成的元素触发的事件不起作用

Question

我有一个<div> 和id="modal" 使用jQuery load() 方法动态生成：

$(".show-product").click(function(){

    $("#modal").load($(this).attr("href"), function(e){

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

我不得不将代码放在类的 click 事件中。这段代码中的详细信息，因为如果我没有运行的话。我在这两个地方都有代码，因为我也在模态之外使用它，被加倍了。

由于我在此处看到的一个示例 Stack Overflow，我动态构建的表也发生了类似的情况。它不捕获单击事件，窗口在打开模式时变暗，但它不调用 url 或加载。这段代码：

$.ajax({
    url : form,
    type: "POST",
    data : postData,
    success:function(data, textStatus, jqXHR){
        $("#dynamicTable>tbody>tr").remove();
        var x = [];
        $.each(dataSet, function(i, item) {
            x.push('<tr><td><a href="/product/' + item.product.id + '" class="details" data-toggle="modal" data-target="#modal">' + item.product.name + '</a></td>');
            x.push('<td>' + item.product.name + '</td></tr>');
        });
        $("#dynamicTable>tbody").html(x.join(""));
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('Not product found!');
    }
});
event.preventDefault()

我认为在这两种情况下事件都不起作用，因为它们是动态加载的。我在此处和 Google 上寻找并尝试进行更改，但无需复制代码（在事件 $(document).ready 和每个动态加载数据的事件中，模态窗口和加载表）。

变化：

$(document).ready(function() {

    //$(".show-product").click(function(){
    $(".show-product").on("click", function(e){

        $("#modal").load($(this).attr("href"), function(e){

            //$('.details').click(function(e){
            // ........
        });
    });
    // Added
    $(".details").on("click", function(e){
        ..........
        ..........
    });
});

这些更改仍然不起作用，仅适用于具有静态内容的页面，当我获得内容动态（模态、表格动态和其他）不起作用的事件时。

我做错了什么？

Answer 1

将事件委托给body 解决了这个问题，因为它避免了将处理程序直接附加到动态生成的元素：

$(document.body).on("click", ".details", function(e){
  ...
});

Answer 2

您应该使用 jquery on() 来处理动态创建的元素上的事件。

文档：http://api.jquery.com/on/