Question

为什么.each无法在动态创建的按钮上运行。

<div id="content"></div>
<button id="clickBut">Click</button>

JS：

$("#clickBut").on("click", function(){
console.log("b clicked");
$("#content").append("<div class='buttnContent'><button class='db'>dyn but</button></div><div class='buttnContent'><button class='db'>dyn but</button></div>");
});

$("#content").find(".db").each(function(i,v){
$(this).on("click",function(){
    console.log("dyn but: "+i);
  });
 });

当我点击动态按钮时，没有任何事情发生。但是如果我删除每个功能并单击，则单击功能正在执行。我希望显示i的值。请分享您的输入

Answer 1

您需要使用event delegation来监听动态添加元素的click事件。内部处理程序使用index()方法获取按钮的索引。

$("#content").on("click",'.db',function(){
  console.log("dyn but: " + $("#content .db").index(this)); 
})

$("#clickBut").on("click", function() {
  console.log("b clicked");
  $("#content").append("<div class='buttnContent'><button class='db'>dyn but</button></div><div class='buttnContent'><button class='db'>dyn but</button></div>");
});

$("#content").on("click", '.db', function() {
  console.log("dyn but: " + $("#content .db").index(this));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button id="clickBut">Click</button>
js:

jquery每个函数都没有在动态添加的元素上执行

1 个答案: