Question

以下是我正在尝试实现的简化示例：http://jsfiddle.net/easLc/

HTML

<div class="bar">
  <div class="apple"> apple</div>
  <div class="banana"> banana</div>
  <div class="citrus"> citrus </div>
</div>

jQuery

function showAlert(event) {
    inventory = event.data.inventory;
    alert(inventory);        
}

fruits = ["apple", "banana", "citrus"];
inventory = [13, 45, 99];

for (i in fruits) {        
    $(".bar ."+fruits[i]).on("click", {inventory:inventory[i]},showAlert);
}

我传递给处理程序的库存数据是动态的，而不像示例那样是静态的。我从异步调用中获取库存数据。每次更新库存数据后，我想将此数据传递给处理程序，而不是让处理程序再次获取该信息。

我注意到的是一些点击，处理程序（我认为）正在崩溃我的浏览器。我是在无意间创造了太多的处理程序吗？如何查看创建的处理程序？或者在点击事件期间会发生什么？我尝试将一些console.log添加到处理程序中，但我没有在控制台中看到它们。

谢谢！

Answer 1

您可以通过在元素绑定后向元素添加某种数据来阻止多个绑定（干净的方式是类，但元数据可能是标准首选）：

$(".bar ." + fruits[i]).not(".bound").on('click', {...}).addClass('bound');

Answer 2

尝试

$(".bar ."+fruits[i]).off('click',showAlert).on("click", {inventory:inventory[i]},showAlert);

这将删除先前绑定的事件并重新绑定它......但很难确定它是否是问题的真正根源。您可以在showAlert中添加console.log（'text'）以查看它是否被多次调用。

jQuery on（）单击事件处理程序，动态数据崩溃

2 个答案: