的jQuery的（）点击事件处理程序与动态数据崩溃

这里是我想要实现一个简单的例子：http://jsfiddle.net/easLc/的jQuery的（）点击事件处理程序与动态数据崩溃

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到处理程序，但我没有在控制台中看到它们。

谢谢！

来源

2012-10-09 PLui

我们可以有真实的代码吗？请用ajax调用和成功函数？我的猜测是，您在每次调用时都添加一个.on，但无法看到您显示的内容 – Salketer

要在Chrome中调试代码，请按F12打开开发人员工具 - 您可能会在控制台中列出一些错误底部。在Firefox中，安装Firebug（https://getfirebug.com/）并使用它来检查错误。在IE中，按F12并转到控制台选项卡查看错误 –

@Salketer，我的代码非常长，仍然需要清理。在这一点上阅读可能太令人困惑了。你可以在每次电话会议上详细说明你的意思吗？我认为这就是我所做的，但我不确定如何发现它。 – PLui

尝试

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

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

来源

2012-10-09 15:09:24 Salketer

我认为那样做了！感谢Salketer！ :) – PLui

我建议使用命名空间作为点击事件，如果你正在使用这种方法，以防万一你绑定了其他点击事件而你不想让它们解除绑定。 –

@ExplosionPills，我不太熟悉命名空间和事件。我会深入挖掘并了解这意味着什么。感谢您的提升！ – PLui

您可以防止多个绑定通过添加某种数据，一旦它被绑定的元素（一个清洁的方式将是一个类，但元数据可以通过标准的优先）：

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

来源

2012-10-09 14:47:23

这听起来像是一个很好的解决方案。但是当库存更新时会发生什么？这是否会传递最初的数据？我刚才试了一下，注意到它多次调用处理程序，而不是一次。然后我的浏览器崩溃了。 – PLui

的jQuery的（）点击事件处理程序与动态数据崩溃

回答

相关问题