javascript - 每个内的 jQuery 仅将函数绑定(bind)到最终项目

Question

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

<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

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

Answer 1

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