javascript - 如何处理动态内容的点击事件？

Question

当我的页面加载时，我的页面上有以下 HTML 代码:

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

当您单击该跨度时，它将创建另一个跨度并向您显示嗨警报，当页面第一次加载时，它工作正常，并在该潜水上写另一个跨度，与旧跨度相同，但之后如果您单击新跨度，它就不起作用。

我做了一些测试，发现如果我添加此代码:

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

在“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);
  });
}

为什么我应该在写入内容的末尾添加点击事件，直到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");
}

Answer 1

你必须做同样的事情，但是使用 document.on("click")

$(document).on("click", ".buttonClass", function() { console.log("inside"); });

$('.divmain').on("click"在加载文档时进行一种绑定(bind)，因此当您将 dynamix 元素添加到 dom 时，它不会被捕获。使用 od document.on 时，它可以工作即使您向文档添加动态内容。