HTML 重绘上的 jquery 事件处理程序

Question

假设我有以下 HTML 和 js

<div>
  <div class="testdiv" id="test1">test</div>
  <div class="testdiv" id="test2">test</div>
</div>

function DynamicEvents() {

  $('.testdiv').click (function () {
     DoSomething();
  });
}

function RedrawHTML() {

  $('#test1').html('new HTML');
  DynamicEvents();
}

每次调用 RedrawHTML 时，我也会调用 DynamicEvents 来重新绑定(bind) test1。假设我多次调用 RedrawHTML 来更新 div。我的问题是:当我单击 test2 时，函数 DoSomething() 是否执行一次，还是执行与我调用 RedrawHTML() 一样多的次数？

Answer 1

为了正确使用 .on，您需要将事件绑定(bind)到 DOM 中当前存在的父元素。所以如果我是你，我会给父 div 一个 id 并将事件绑定(bind)到它。这是一个例子

对于你的html

<div id="container">
  <div class="testdiv" id="test1">test</div>
  <div class="testdiv" id="test2">test</div>
</div>

在JS中

$('#container').on('click', '.testdiv', DoSomething); 

如果在事件绑定(bind)时没有父元素保证位于 DOM 中，那么在最坏的情况下您可以绑定(bind)到 body 或 document 但我不推荐这种方法。

$("body").on('click', '.testdiv', DoSomething); 

$(document).on('click', '.testdiv', DoSomething); 

如果您不使用 jQuery 1.7，则等效的委托(delegate)代码为

 $('#container').delegate('click', '.testdiv', DoSomething); 

只需执行一次，.testdiv 触发的所有点击事件都会冒泡到 #container 和 DoSomething()将被执行。