未注册 Jquery 函数

Question

我试图使用 Jquery 生成一个 html 表

slicedata.forEach(function(e, i, a) {
    var obj = e;
    $('#ticket-table').append('<tr><td>' + obj.created_dt + '</td><td>' + obj.ticket_num + '</td> <td>' + obj.division + '</td><td>' + obj.pg + '</td> <td>' + obj.duration + '</td><td>' + obj.error_count + '</td><td>' + obj.outage_caused + '</td><td>' + obj.system_caused + '</td><td>' + obj.addt_notes + '</td><td><button id="edit' + i + '"">edit</button></td></tr>');
})

然后为按钮 ID 注册事件 -

$('#edit0').click(function() {
    alert('clicked')
    //load_datatable('N')
})

html 表正在使用 Jquery 正确生成，但事件未注册。

所有这些代码都在 document.ready（） 函数中

Answer 1

尝试将事件绑定到父元素，而不是动态生成的元素。

$("body").on("click", "#edit0", function() {
    alert("clicked");
});

或者，在您的特定情况下，您可以执行以下操作：

$("#ticket-table").on("click", "#edit0", function() {
    alert("clicked");
});

始终将事件绑定

到动态添加实际元素时您知道始终存在的父元素，这样您就不必担心再次绑定事件。

Answer 2

您正在动态追加控件，因此请尝试此控件。

$('body').delegate('input[id*="edit"]','click',function() {
    alert('clicked')
    //load_datatable('N')
})

Answer 3

$('#edit0').click(function() {
        alert('clicked')
            //load_datatable('N')
    })

上述问题在于，它假设#edit0在加载这段代码时已经是DOM的一部分。

尝试将其更改为：

$('#edit0').on('click', function() {
        alert('clicked')
            //load_datatable('N')
    })

如果 #edit0 尚不存在，但将成为 DOM 中其他内容的一部分，请尝试将$.on绑定到父容器，然后将其指向#edit0：

 $('#parent').on('click', '#edit0', function() {
            alert('clicked')
                //load_datatable('N')
        })

$.on()事件处理程序会将事件侦听器附加到 HTML 中存在的任何内容，无论它是否已加载。此处.on()文档