奇妙な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); 

} 

「this」の部分はうまくいきません。作成した各イベントを参照してください。例えば

私は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"); 

、どのようcall()の詳細についてはthis記事を参照してapply()ください。およびthis。