jquery - 动态删除元素 Jquery .click 不触发

Question

我正在编写一个脚本来动态创建和删除元素，添加元素效果很好。但是#removeText 函数没有触发，我假设是因为它是在页面完成加载之后创建的。如果#removeText click 函数是动态创建的，如何使其工作？

var i = 0;

$('#addText').on('click', function() {
    var div = $("#addText").closest('div').attr('id');

    $("<p><input type=\"text\" id=\"text" + i + "\" placeholder=\"Type something…\"><a href=\"#\" id=\"removeText\">Remove</a></p>").appendTo('#' + div);
});

$('#removeText').on('click', function() {
    console.log(1);
});

Answer 1

如果#removeText调用时 DOM 中不存在$("#removeText").on，则不会绑定任何内容，因为没有任何内容可以绑定，因为它不存在。

一切都没有丢失。使用事件委托：

$(document).on('click', '#removeText', function () {

您可能也应该这样做#addText。您也可以委托给 DOM 中已经存在的元素。