Question

我的问题是：

当我按下＆＃34;显示数字＆＃34;按钮，Javascript动态创建两个元素，其类是＆＃34;数字＆＃34;。我希望计算机能够控制我点击的元素的文本。但是无论我多么努力地点击元素，我的电脑控制台都没有。

HTML（帕格）：

 button#btn show numbers
 .numberlist

制作HTML：

<button id="btn">show numbers</button>
<div class="numberlist"></div>

JavaScript的：

 $("#btn").click(
   function(){
     $(".numberlist").html("<div class='number'>1</div><div class='number'>2</div>");
   }
 );

 $(".number").click(
   function(){
     console.log("You click number "+$(this).text());
   }
 );

It's Codepen上的页面。

Answer 1

您需要使用事件委托;由于$(".number")使用class="number"定位元素并分配事件，因此在定义函数时需要存在该元素。由于您要追加（通过.html）该元素，因此在声明函数时它不存在。要处理此问题，请使用：

$("body").on("click", ".number", function(){
  console.log("You click number "+$(this).text());
});

这会将点击处理程序分配给body中具有.number类的任何元素，甚至是动态添加的元素。

jQuery：事件无法处理动态创建的元素

1 个答案: