如何在单击动态创建的按钮时添加 jquery？ [复制]答案

【问题标题】：How to add a jquery on click on a button that was created dynamically? [duplicate]如何在单击动态创建的按钮时添加 jquery？ [复制]
【发布时间】：2021-05-24 11:52:48
【问题描述】：

我有动态创建的按钮。如何在此按钮上添加 jquery onclick？我还是 jQuery 的新手。

这就是我在 jQuery 中创建按钮的方式：

  var language_add_button = document.createElement("button");
  language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
  language_add_button.setAttribute("class", "btn btn-padding");
  language_add_button.setAttribute("type", "button");

此函数创建带有 id + ctr 的按钮，使它们独一无二。

我知道

  $("#btnRemoveLanguage_").click(function (e) {
    RemoveLanguage(true);
    e.preventDefault();
  });

但由于创建时有计数器，所以按钮变成btnRemoveLanguage_1、btnRemoveLanguage_2等

我如何确保它点击了正确的按钮？

【问题讨论】：

要将事件添加到动态按钮，您需要知道父级（父级应该是静态的）。然后你可以添加一个事件

标签： javascript jquery

【解决方案1】：

对于动态事件处理，您可以使用：父元素上的事件监听器。 Document on event delegation

但就目前而言，我已经使用了文档。

$(document).on("click", "#btnRemoveLanguage_",function (e) {
    RemoveLanguage(true);
    e.preventDefault();
  });

【讨论】：

在 btnRemoveLanguage_ 上有一个计数器，使其成为 btnRemoveLanguage_1, btnRemoveLanguage_2
这只是您问题的事件委托示例。您可以使用您的逻辑循环使用 classNames 或 ID 并附加事件监听器。

【解决方案2】：

你会这样做：

$(document).on("click", "#your_id" , function() {
            // do something $(this) is your button
        });

【讨论】：

本例中的#your_id 是静态的。除非你说要为每个 ID._ctr 创建很多这样的
使用模板文字代替“静态”#your_id，例如`#{your_var}`...

【解决方案3】：

这是我的解决方案。

var language_add_button = document.createElement("button");
language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
language_add_button.setAttribute("class", "btn btn-padding");
language_add_button.setAttribute("type", "button");

/*******************************
 *   Append the following code *
 *******************************/      
$(language_add_button).click((e)=>{
    RemoveLanguage(true);
    e.preventDefault();
})

【讨论】：

我修改了我的代码以使其更易于理解。

【解决方案4】：

.click() 只会绑定到文档中的现有元素，也就是直接绑定。在您的情况下（元素是动态创建的），您将不得不使用像 .on() 这样的委托绑定。

var buttonID = "btnRemoveLanguage_" + ctr;
var language_add_button = document.createElement("button");
language_add_button.setAttribute("id", buttonID);
language_add_button.setAttribute("class", "btn btn-padding");
language_add_button.setAttribute("type", "button");

$(document).on("click", buttonID, function(e) {
    RemoveLanguage(true);
    e.preventDefault();
});

$(document).delegate(buttonID, "click", function(e) {
    RemoveLanguage(true);
    e.preventDefault();
});

source

【讨论】：

【解决方案5】：

你可以使用绑定。

language_add_button.appendTo('/where you need to add/').bind('click', '/your callback function here/');

【讨论】：

【解决方案6】：

将侦听器连接到类而不是 ID 不是更容易吗？或者创建一个数据值并连接到它。这将自动为任何新元素添加一个监听器。

const language_add_button = document.createElement("button");
language_add_button.setAttribute("id", "btnRemoveLanguage_" + ctr);
language_add_button.setAttribute("class", "btn btn-padding arrayOfMyButtons");
language_add_button.setAttribute("type", "button");

$(".arrayOfMyButtons").click(function (e) {
   // any logic inside
});

【讨论】：

这在我的回答中现在是一样的。但我没有在我的按钮中添加一个值，而不是 arrayOfMyButtons。

【解决方案7】：

我在按钮上添加了一个值并将其改为类。这解决了我的问题

  var language_add_button = document.createElement("button");
  language_add_button.setAttribute("class", "btn btn-padding btnRemoveLanguage");
  language_add_button.setAttribute("type", "button");
  language_add_button.setAttribute("value", ctr);


  $("#btnRemoveLanguage_").click(function (e) {
    var ctr = $(this).val();
    RemoveLanguage(true, ctr);
    e.preventDefault();
  });

有了这个，我只有 1 个删除功能，并且可以在所有以 ctr 为值的按钮上工作。

【讨论】：