이상한 자바 스크립트 행동

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.