在通过javascript动态创建的元素处使用jquery答案

【问题标题】：Use jquery at dynamically created element by javascript在通过javascript动态创建的元素处使用jquery
【发布时间】：2018-12-08 09:06:52
【问题描述】：

我在我的 main.js 文件中做了一个这样的按钮：

del_btn = document.createElement("button");
del_btn.className = "btn btn-light btn-sm ";
del_btn.type = "button";
del_btn.id = "delete_btn";
del_btn.innerHTML = 'X';

并将其放入我的 index.html 页面中的<tr> 中。我想在单击按钮时发出此警报。所以我也在我的 main.js 文件中编写了一个看起来像这样的代码。

$("#delete_btn").click(function() {
    alert("delete button clicked!!");
});

但是当我单击 id 为“按钮”的按钮时，什么也没有发生。我不知道为什么这不起作用。有谁知道为什么这不起作用？任何建议将不胜感激！！！

【问题讨论】：

In jQuery, how to attach events to dynamic html elements?的可能重复
Event binding on dynamically created elements?的可能重复
$("tr").on('click', '#delete_btn', function() { alert("delete button clicked!!"); }); 这样使用，这样就可以了，使用重复的 id 不是一个好习惯

标签： javascript jquery html dynamic-html

【解决方案1】：

根据最新的jquery 试试下面

$(document).on('click', "#delete_btn", function() {
    alert("delete button clicked!!");
});

【讨论】：

【解决方案2】：

我假设您将 delete_btn 附加到文档的正确位置，例如，

appendTo = document.getElementById("idToWhomeYouAppend")
appendTo.append(del_btn)

当您使用计划 js 创建 del_btn 按钮时，以相同的方式附加 onclick。例如

del_btn.onclick = function() {
    alert("delete button clicked!!");
};

因此无需使用 jquery 注册 onclick，但如果您想使用 jquery，请确保在 del_button 附加到 dom 后执行基于 jquery 的代码。

【讨论】：