如何分配事件回调在JavaScript（jQuery）中迭代数组

问题描述

我通过javascript生成无序列表（使用jQuery）。每个listitem都必须为click事件接收自己的事件侦听器。但是，我无法正确回拨附加到正确的项目。一个（剥离的）代码示例可能会清除一些东西：

  for（class_id in classes）{
 callback = function（）{this.selectClass（class_id）}; 
 li_item = jQuery（'< li>< / li>'）
 .click（callback）; 
} 
  

实际上，在这个迭代中还有更多的事情，但是我没有想到这与这个问题非常相关。在任何情况下，发生的情况是，回调函数似乎被引用而不是存储（& copy）。最终结果？当用户点击列表项目的任何时，它将始终执行最后一个 class_id code> classes array，因为它使用存储在 callback 中的函数。

我发现了一些脏的解决方法（如解析一个封闭的 a 元素中的 href 属性）但我想知道是否有办法以干净的方式实现我的目标。如果我的方法是可怕的，请说，只要你告诉我为什么:-)谢谢！

解决方案

这是一个更好的清洁方式来做你想要的。

使用.data（）将class_id信息添加到元素上。

然后使用.live（）向所有新元素添加点击处理程序，这样可以避免使用x * click函数。

$ b $（$ class $）$ {pre> for（class_id in classes）{
li_item = jQuery（'< li>< / li> .addClass（ 'SomeClass的'）;
}

//新的li的
$（'li.someClass'）上的设置点击处理程序live（'click'，myFunction）

function myFunction（）{
// get class_id
var classId = $（this）.data（'class_id'）;
//做某事
}


I'm generating an unordered list through javascript (using jQuery). Each listitem must receive its own event listener for the 'click'-event. However, I'm having trouble getting the right callback attached to the right item. A (stripped) code sample might clear things up a bit:

for(class_id in classes) {
    callback = function() { this.selectClass(class_id) };
    li_item = jQuery('<li></li>')
                .click(callback);
}

Actually, more is going on in this iteration, but I didn't think it was very relevant to the question. In any case, what's happening is that the callback function seems to be referenced rather than stored (& copied). End result? When a user clicks any of the list items, it will always execute the action for the last class_id in the classes array, as it uses the function stored in callback at that specific point.

I found dirty workarounds (such as parsing the href attribute in an enclosed a element), but I was wondering whether there is a way to achieve my goals in a 'clean' way. If my approach is horrifying, please say so, as long as you tell me why :-) Thanks!

解决方案

This is a better cleaner way of doing what you want.

Add the class_id info onto the element using .data().

Then use .live() to add a click handler to all the new elements, this avoids having x * click functions.

for(class_id in classes) {
    li_item = jQuery('<li></li>').data('class_id', class_id).addClass('someClass');
}

//setup click handler on new li's
$('li.someClass').live('click', myFunction )

function myFunction(){
   //get class_id
   var classId = $(this).data('class_id');
   //do something
}

这篇关于如何分配事件回调在JavaScript（jQuery）中迭代数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！