Question

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

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

Answer 1

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

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

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

Answer 2

请注意，您正在清除#room中的html，但随后添加trs＆＃39;和td＆＃39; s

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

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

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

您的所有行都会有一个<a>，ID为＆＃34;编辑＆＃34;因为你没有用每个追加来区分它们。意思是你wikl有多个＆＃34;编辑＆＃34;当使用此函数创建表时。

JQuery单击事件不会触发

2 个答案: