Javascript 如何处理动态内容上的单击事件？

加载页面时，页面上有以下HTML代码：

<div class="divmain">Add
  <span class="spn">123</span>
</div>

在“spanwriter”函数中，它将起作用，我的意思是，如果该函数如下所示：

  function spanwriter(master) {
  var rows = '<span class=\'spn\'>123</span>';
  $('.divmain').html(rows);

 <------- this event must be add here until it --------------->
    $('.spn').on("click", function (e) {   works
     showalert(this);
  });
}

函数编写器（主）{
变量行='123'；
$（'.divmain'）.html（行）；
$（'.spn'）。单击（“click”），函数（e）{works
showarert（这个）；
});
}

为什么我应该在所写内容的末尾添加click事件，直到span获得该事件并开始工作

我在示例中使用了jquery-1.10.2.js

我的所有代码是：

$(function () {

$('.divmain').on("click", function (e) {
    spanwriter(this);
});

$('.spn').on("click", function (e) {
    showalert(this);
});

});

function spanwriter(master) {
   var rows = '<span class=\'spn\'>123</span>';
   $('.divmain').html(rows);
}

function showalert(master) {
  alert("hi");
}

$（函数（）{
$（'.divmain'）。在（“单击”上，函数（e）{
西班牙作家（本）；
});
$（'.spn'）。在（“单击”，函数（e）{
showarert（这个）；
});
});
函数编写器（主）{
变量行='123'；
$（'.divmain'）.html（行）；
}
功能showalert（主）{
警报（“hi”）；
}

您必须对document.on（“单击”）执行相同的操作

---

$（'.divmain'）.on（“单击”在加载文档时创建一种绑定，因此当您向dom中添加Dynamicx元素时，它不会被捕获。使用od document.on时，即使您向文档中添加动态内容，它也会起作用。

您也必须这样做，但要使用document.on（“单击”）

---

$（'.divmain'）。打开（“单击”加载文档时进行一种绑定，这样当您向dom中添加Dynamicx元素时，它不会被捕获。使用od document.on，即使您向文档中添加动态内容，它也会工作。

解决问题的最简单和最好的方法是将事件侦听器附加到dom中的父元素，并传递事件侦听器的第二个参数jQuery文档（）中描述的

on（）

方法

换言之，你应该有以下几点：

$('body').on("click", ".spn", function (e) {
    showalert(this);
    spanwriter(this);
});

然后让

spanwriter（）

将新span添加到调用它的元素的父级

---

我希望这就是您所寻找的，并回答了您的问题。

解决问题的最简单和最好的方法是将事件侦听器附加到dom中的父元素，并传递jQuery文档（）中描述的

on（）方法的第二个参数（）

换言之，你应该有以下几点：

$('body').on("click", ".spn", function (e) {
    showalert(this);
    spanwriter(this);
});

然后让
spanwriter（）
将新span添加到调用它的元素的父级

我希望这就是您所寻找的，并回答了您的问题。
您想使用委派事件：在“事件处理程序仅绑定到当前…”处开始阅读。您想使用委派事件：在“事件处理程序仅绑定到当前…”处开始阅读
$('body').on("click", ".spn", function (e) {
    showalert(this);
    spanwriter(this);
});