jQuery on within each only bind function to final item

Question

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

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

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

Answer 1

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

jQuery on within each only bind function to final item

jQuery on within each only binds function to final item

javascript

jquery

closures

loops

event-handling