jQuery on inside each 仅将函数绑定到最终项目答案

【问题标题】：jQuery on within each only binds function to final itemjQuery on inside each 仅将函数绑定到最终项目
【发布时间】：2015-08-22 01:46:20
【问题描述】：

我试图将一个函数绑定到动态创建的元素，为数组中的每个组传递不同的变量。但是下面的代码只是将函数绑定到最终的数组项：

<div id="pbody">My dogs chase cats for canine fun.</div>
<script>
function picturekeywords() {
    $(wops).each(function(index) {
        var $this = this;
        var keyword = this.keywords.split(',');
        $(keyword).each(function() {
            var rex = new RegExp('((\\w|\\b|\'|\"|‘|’|“|”)*' + this + '(\\w|\\b|\'|\"|‘|’|“|”)*)', 'gi');
            $('#pbody').html($('#pbody').html().replace(rex, '<span class="wop">$1</span>'));
        });
        $('.wop').on('mouseenter', {wopobj:$this}, wop);
        $('.wop').attr('class', 'woptrig');
    });
    $('.woptrig .woptrig').each(function() {
        $(this).after($(this).html());
        $(this).remove();
    });
}
picturekeywords();

function wop(event) {
    var wopobj = event.data.wopobj;
    console.log(wopobj.picture);
}

var wops = [{keywords:'dog,canine', picture:'dog.jpg'}, {keywords:'cat,feline', picture:'cat.jpg'}];
</script>

所需的结果应该记录悬停的关键字的图像名称。但它只适用于最后一个。

http://jsbin.com/doyoxu/1/edit?html,css,js,console,output

我认为这看起来像是一个关闭问题，但无法解决。有什么想法吗？

【问题讨论】：

不是问题，但那些 <html> 标记错位了？
您将事件处理程序附加到所有 .wop 元素，因此最终事件处理程序位于顶部，将处理程序附加到特定的 .wop 元素，而不是使用 .wop 选择器一次全部附加
我认为每次新迭代都更改类只会影响正确的元素？在任何情况下，为 $('.wop').on() 添加 .each() 会产生相同的结果（参见 bin）。
当方法中的 $(this) 完全一样时，你在附加一个数据对象是什么？问题在于$('.wop').on('mouseenter', {wopobj:$this}, wop); 正在为过度迭代的所有内容添加一个新事件。

标签： javascript jquery loops event-handling closures

【解决方案1】：

尤里卡！替换功能每次都会更改整个文本，而不仅仅是匹配。所以我将循环分成两部分，最后绑定所有函数。排序。 :)

【讨论】：