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重新绑定test1。假设我多次调用RedrawHTML来更新div。我的问题是这样的：当我点击test2时，函数DoSomething()执行一次还是被执行的次数与我调用RedrawHTML()的次数相同？

Answer 1

多次绑定单击事件时，将多次调用

DoSomething。使用delegate或live绑定事件处理程序，并使其捕获新插入的DOM元素上的事件，而不是重新绑定事件。

更好的是，如果您使用的是jQuery 1.7+，请使用on的delegate形式：

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

Answer 2

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

为你的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);

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

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

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

如果你没有使用jQuery 1.7，那么等效的委托代码将是

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

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

Answer 3

当您从其他地方拨打 RedrawHTML() 时，如果您点击 test1 或 { {1}} 然后 test2 将会执行。

HTML重绘的jquery事件处理程序

3 个答案: