在 javascript 动态创建的元素上使用 jquery

Question

我在我的 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 为 'button' 的按钮时没有任何反应。我不知道为什么这不起作用。有谁知道为什么这不起作用？任何建议将不胜感激！！！

Answer 1

根据最新 jquery 尝试以下

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

Answer 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 附加到 jquery 之后执行基于 jquery 的代码dom.

在 javascript 动态创建的元素上使用 jquery

Use jquery at dynamically created element by javascript

javascript

jquery

html

dynamic-html