Используйте jquery в динамически созданном элементе javascript

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';

и поместил ее в <tr>, который находится на моей странице index.html.Я хотел сделать это предупреждение, когда кнопка нажата.Поэтому я написал код, который выглядит следующим образом, в моем файле main.js.

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

Но ничего не происходит, когда я нажимаю на кнопку с идентификатором «button».Я понятия не имею, почему это не работает.Кто-нибудь знает, почему это не работает?Любой совет будет оценен !!!

Answer 1

Я предполагаю, что вы добавляете delete_btn к документу в нужном месте, например,

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

Поскольку вы создаете кнопку del_btn с использованием плана js, присоединяйте онклик аналогичным образом.например,

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

Поэтому нет необходимости регистрировать onclick с помощью jquery, но если вы хотите использовать jquery, убедитесь, что код на основе jquery выполняется после добавления del_button в dom.

Answer 2

согласно последним jquery попробуйте ниже

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