JQuery单击事件不会触发[重复]

This question already has an answer here:

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

Click event doesn't work on dynamically generated elements [duplicate] 20 answers
Click事件不适用于动态生成的元素[重复] 20个答案

I am doing a project and i use ajax to load content into page.

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

my jquery function is :

我的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>");
            };
        }
    });
}

The content load success fully but when i click on the <a id='edit' href='#'>edit</a> element it does not trigger the corresponding click event. The code is like:

内容加载成功，但是当我点击编辑元素时，它不会触发相应的点击事件。代码如下：

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

2 个解决方案

#1

You are binding event to element those are present in DOM the time on() is executed. Delegate event to static parent for elements added dynamically.

在执行on（）时，您将绑定事件绑定到DOM中存在的元素。将事件委托给静态父级，以便动态添加元素。

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

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

#2

just note you are clearing the html from #room but then appending trs' and td's

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

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

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

If #room is the div that houses a table, this will cause an issue since you have cleared the table and th structure from the div. Unless #room is the id of the table and you are simply clearing all trs etc from it - but since you did not post the html - I cannae say.

如果#room是包含表的div，那么这将导致问题，因为您已从div中清除了表和结构。除非#room是表的id并且你只是清除所有trs等 - 但是因为你没有发布html - 我可以说。

also all of your rows will have an <a> with the id of "edit" because you are not differentiating them with each append. Meaning you wikl have multiple ids of "edit" when the table is created with this function.

此外，您的所有行都将具有ID为“edit”的，因为您没有将它们与每个追加区分开来。这意味着当使用此函数创建表时，wikl会有多个“编辑”ID。

#1