奇怪的Javascript行爲

Question

我使用JQuery追加圖像，像這樣：

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight();" />'); 

我分配一個highlight函數來創建和附加每個圖像！問題是高亮功能不執行。

//Highlight function 
function highlight() 
{ 
    var indicator = $(this).data("count"); 
    alert(indicator); 

} 

「這個」部分似乎沒有工作。我希望這是指每個創建的事件。

例如，如果我創建了3個事件

event_1 event_2 event_3

，我點擊 「圖像event_2」，那麼 「這個」 必須參照 「圖像event_2」

Answer 1

嘗試onclick="highlight.call(this);"

但是，它會是太多更清潔以正確附加事件處理程序：

var img = $('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" />'); 
img.on('click', highlight); 
$('#event_list_main').append(img); 

甚至更​​易讀：

var img = $('<img/>', { 
    'class': 'listed_event', 
    id: 'event_' + event_counter, 
    src: 'final_tutorial_buttons/event.png' 
}).height(50).width(50).data('count', event_counter).on('click', highlight); 
$('#event_list_main').append(img); 

Answer 2

這不是意外的行爲，你不及格的this值。但你期待它，因爲jQuery自動爲你做。

這是一個簡單的辦法：

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight.call(this);" />'); 

即使它最好能夠連同取代了一切：

$('<img class="listed_event" id="event_' + 
    event_counter + '" data-count="' + 
    event_counter + '" src="final_tutorial_buttons/event.png" height="50" width="50" />') 
    .click(highlight).appendTo("#event_list_main"); 

請參閱this職位更多有關如何call()，apply()和this。