jQuery点击事件不会触发[重复]

Question

这个问题已经在这里有了答案：

• Click事件不适用于动态生成的元素[重复] 20个答案

我正在做一个项目，我使用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>元素时，它不会触发相应的click事件。 代码如下：

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

Answer 1

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

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

委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。 通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

Answer 2

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

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

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

如果#room是容纳表的div，则由于您已从div中清除了表和th结构，因此将引起问题。 除非#room是表的ID，并且您只是从中清除所有trs等-但由于您没有发布html-我可以说。

而且您的所有行都将有一个<a> ，其ID为“ edit”，因为您没有在每个附加项之间进行区分。 这意味着使用此函数创建表时，您将拥有多个“ edit”的ID。