Javascript 每个only中的jQuery将函数绑定到最终项

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

<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>

我的狗追猫是为了好玩。
函数picturekeywords（）{
$（wops）。每个（函数（索引）{
var$this=这个；
var关键字=this.keywords.split（'，'）；
$（关键字）。每个（函数（）{
var rex=new RegExp（“（\\w |\\b | \'.“|”|“|”|“|”|“|”*”+this+”（\\w |\\b | \'.“|”|“|”*），“gi”）；
$（'.'pbody'）.html（$（'.'pbody'）.html（）.replace（rex，'$1'））；
});
$（'.wop'）。on（'mouseenter'，{wopobj:$this}，wop）；
$（'.wop'）.attr（'class'，'woptrig'）；
});
$（'.woptrig.woptrig'）。每个（函数（）{
$（this.after（$（this.html（））；
$（this.remove（）；
});
}
图片关键词（）；
功能wop（事件）{
var wopobj=event.data.wopobj；
console.log（wopobj.picture）；
}
var wops=[{关键词：'dog.jpg'，图片：'dog.jpg'}，{关键词：'cat.jpg'，图片：'cat.jpg'}]；

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

---

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

好极了！replace函数每次都会更改整个文本，而不仅仅是匹配。所以我将循环分成两部分，最后绑定所有函数。排序：）

不是问题所在，但是那些

标记放错了位置，太可怕了？您正在将事件处理程序附加到所有

.wop

元素，因此最终的事件处理程序位于顶部，使用

.wop

选择器将处理程序附加到特定的

.wop

元素，而不是一次附加到所有元素。wopselectorI认为，通过每次更改类，新的迭代只会影响正确的元素？在任何情况下，为$（'.wop'）.on（）添加一个.each（）都会产生相同的结果（请参见bin）。当方法中的$（this）完全相同时，将数据对象附加到该对象上的是什么？问题在于（'mouseenter'，{wopobj:$this}，wop'）上的事实正在向迭代中的所有内容添加一个新的evenet。