Question

我试图在jquery .each循环中用另一个元素替换各种元素，并将点击事件交给他们的子节点，但它不起作用，这是我的代码。

var replacer = function () {
  var elementbody = "<div class='Container'><div class='Button'></div></div>";
  $('.myclass').each(function (index, element) {
    $(element).replaceWith(elementBody);
    $(element).find('.Button').click(function () {
  //------------------To do on click event------------------//
});
};

Answer 1

使用后

$(element).replaceWith(...);

element仍然引用旧元素，而不是替换它的元素。因此$(element).find('.Button')找不到您刚刚添加的按钮。

不是将处理程序添加到您添加的每个元素，而是使用委托仅绑定处理程序一次，如Event binding on dynamically created elements?中所述

$("someSelector").on("click", ".Button", function() {
    ...
});

Answer 2

您可以像Barmar建议的那样使用委托，也可以在运行replaceWith

之前为自己提供引用新内容的新jquery对象

像这样的东西，也许：

new_element = $('<div><button>Hello World</button></div');
$(element).replaceWith(new_element);
new_element.find('button').on('click', function(e) {
    console.log(e);
});

使用单击事件在内部循环中使用Jquery replaceWith（）

2 个答案: