JQuery上每個只綁定功能最終項目

我想綁定一個函數動態創建的元素，將不同的變量傳遞給它的數組中的每個組。但下面的代碼僅將函數綁定到最終數組項：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>

期望的結果應該記錄關鍵字懸停的img名稱。但它只適用於最後一次。

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

我認爲它看起來像一個封閉的問題，但不能工作了。有任何想法嗎？

來源

2015-06-07 Christopher Kellett

不是問題，但那些''標記是可怕的錯位？ – adeneo

您正在將事件處理程序附加到所有'.wop'元素，以便最終的事件處理程序處於頂層，將處理程序附加到特定的'.wop'元素，而不是一次使用'.wop'選擇器全部使用 –

我認爲每次新的迭代只會影響正確的元素時，通過改變類？在任何情況下，爲$（'。wop'）。（）添加.each（）會得到相同的結果（請參閱bin）。 –