Question

我的页面加载时，我在页面上有这个HTML代码：

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

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

我做了一些测试，发现我是否添加了这段代码：

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

在＆＃34; spanwriter＆＃34;功能它会起作用，我的意思是如果那个功能是这样的：

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

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

Answer 1

你必须使用document.on（＆＃34;点击＆＃34;）

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

$（＆＃39; .divmain＆＃39;）。on（＆＃34;点击＆＃34;在加载文档时进行一种绑定，所以当你向dom添加dynamix元素时，它就会被捕获。使用od document.on，即使您向文档中添加动态内容，它仍然有效。

Answer 2

您问题的最简单和最佳解决方案是将事件侦听器附加到dom中的父元素，并传递on()方法的第二个参数，如jQuery文档（http://api.jquery.com/on/）中所述

换句话说，你应该有以下几点：

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

然后让spanwriter()将新范围添加到调用它的元素的父级。

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

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

2 个答案: