JQuery点击事件不会触发[重复]答案

【问题标题】：JQuery click event does not trigger [duplicate]JQuery点击事件不会触发[重复]
【发布时间】：2016-07-04 23:36:21
【问题描述】：

我正在做一个项目，我使用 ajax 将内容加载到页面中。

我的 jquery 函数是：

function load_room() {
    var sem = 0;

    $.ajax({
        url: 'ajax/room_ajax.php?option=2',
        type: 'POST',
        data: { 'sem': sem },
        dataType: "json",
        success: function (data) {
            console.log(data[0]);
            $("#room").html("");
            for (var i = 0; i < data.length; i++) {
                var x = i + 1;
                $("#room").append("<tr><td>" + x + "</td><td>" + data[i]['room_name'] + "<td><a id='edit' href='#'>edit</a></td></tr>");
            };
        }
    });
}

内容加载成功但是当我点击<a id='edit' href='#'>edit</a> 元素它不会触发相应的点击事件。 代码如下：

$('#edit').on('click', function(){
    alert("hai")
});

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

您正在将事件绑定到执行on() 时存在于DOM 中的元素。为动态添加的元素将事件委托给静态父级。

$('#room').on('click', "#edit", function(){
     alert("hai")
});

Delegated events的优点是可以处理事件来自稍后添加到文档中的后代元素时间。通过选择一个保证出现在附加委托事件处理程序时，您可以使用委托事件，以避免需要频繁附加和删除事件处理程序。

【讨论】：

, 在 "#edit" 之后丢失。 :)。除了完美之外。
谢谢 :) 现在可以使用了

【解决方案2】：

请注意，您正在清除#room 中的 html，然后附加 trs' 和 td's

         $("#room").html("");

            $("#room").append("<tr><td>...

如果#room 是包含表格的 div，这将导致问题，因为您已从 div 中清除表格和结构。除非 #room 是表格的 ID，并且您只是从中清除所有 trs 等 - 但由于您没有发布 html - 我不能说。

您的所有行也将有一个<a>，其 id 为“edit”，因为您没有通过每个附加来区分它们。这意味着当使用此函数创建表时，您将有多个“编辑”ID。

【讨论】：