如何在javascript(jQuery)中分配迭代数组的事件回调

2022-01-24 00:00:00 events iteration jquery javascript

我正在通过 javascript(使用 jQuery)生成一个无序列表.每个列表项必须接收自己的点击"事件监听器.但是，我无法将正确的回调附加到正确的项目.一个(剥离的)代码示例可能会让事情变得更清楚:

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);
}

实际上，本次迭代中还有更多内容，但我认为这与问题不太相关.无论如何，正在发生的事情是回调函数似乎是 referenced 而不是 stored (& 复制).最终结果?当用户点击任何列表项时，它总是会执行classesclass_id的动作> 数组，因为它在该特定点使用存储在 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.

我发现了一些肮脏的解决方法(例如在封闭的 a 元素中解析 href 属性)，但我想知道是否有办法实现我的目标干净"的方式.如果我的方法很可怕，请说出来，只要你告诉我原因:-) 谢谢！

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.

使用 .data() 将 class_id 信息添加到元素上.

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

然后使用 .live() 为所有新元素添加点击处理程序，这样可以避免 x * 点击函数.

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
}

相关文章