如何在动态创建的按钮上添加一个jquery点击事件？

10 浏览
0 Comments

如何在动态创建的按钮上添加一个jquery点击事件？

我有一些动态创建的按钮。如何在这些按钮上添加一个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等。

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

0

3 答案

0 Comments

这是我的解决方案。

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");
// 添加点击事件
$(language_add_button).click((e) => {
    RemoveLanguage(true);
    e.preventDefault();
})

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

原因：动态创建的按钮无法直接添加jQuery的点击事件。需要通过代码将点击事件绑定到动态创建的按钮上。

解决方法：

1. 首先，使用`document.createElement`创建一个按钮元素。

2. 使用`setAttribute`方法为按钮元素设置`id`、`class`和`type`属性。

3. 使用jQuery的`click`方法为按钮添加点击事件。

4. 在点击事件的回调函数中，执行`RemoveLanguage(true)`函数，并使用`e.preventDefault()`阻止默认的点击行为。

通过以上步骤，我们可以将jQuery的点击事件添加到动态创建的按钮上。

0
0 Comments

动态添加的按钮可以使用事件委托来处理。具体的解决方法是在父元素上绑定事件监听器，并通过选择器匹配到动态添加的按钮。下面是一个示例代码：

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

在这个示例中，通过document元素作为父元素，使用on方法绑定了一个点击事件的监听器。选择器"#btnRemoveLanguage_"用于匹配id以"btnRemoveLanguage_"开头的动态添加的按钮。

这个示例中的计数器使得按钮的id变成了"btnRemoveLanguage_1"、"btnRemoveLanguage_2"等等。你可以根据自己的逻辑使用类名或id进行循环，并将事件监听器附加到相应的按钮上。

以上就是关于如何在动态创建的按钮上添加jQuery点击事件的问题的原因和解决方法的整理。通过使用事件委托，可以在父元素上绑定事件监听器来处理动态添加的按钮的点击事件。

0
0 Comments

问题的原因是需要在动态创建的按钮上添加一个jQuery的点击事件。解决方法是使用$(document).on("click", "#your_id" , function() { // do something $(this) is your button });代码来添加点击事件。可以使用模板字符串（template literals）来替换静态的#your_id，例如使用`#{your_var}`。

0