jQuery의 가장 가까운 find 혼란

Question

나는 화면에 같은 위젯이 3 개 있고, 사용자가 화면에서 이동하고 화면에 배치 할 수있는 컨텐츠가있는 3 div 태그와 같은 위젯이 있습니다. iGoogle이했던 것과 조금 같습니다. 기본적으로 화면에는 동일한 위젯을 0 개 이상 가질 수 있습니다.

ID 대신 HTML에서 클래스를 사용하여이 작업을 수행 할 수 있습니다. 나는이 위젯이있는 경우

<div class="widget_1"> 
    <div class="widget_header_1"></div> 
    <div class="widget_sub_header_1"></div> 
    <div class="widget_content_1"></div> 
    <div class="widget_footer_1"></div> 
<div> 

따라서, 사용자가 클래스 widget_1, 2 위젯이있을 것이다 화면 즉 위의 HTML 두 번 HTML 소스에있을 것입니다. 어쨌든

, 나는 즉, 위젯의 content 섹션에 데이터를 추가하는 위젯의 sub_header에있는 버튼을 가지고 난의 버튼을 클릭하면, 같이 잘 작동

$('.my_button').live('click',function() { 
    get_data($(this)); 
}); 

처음에는 widget_1, 그 내용 만 변경됩니다. 두 번째 widget_1 버튼을 클릭하면 콘텐츠가 변경되고 다른 widget_1의 콘텐츠에는 영향을 미치지 않습니다.

내 질문은

$(this).closest('.widget_1').find('.widget_content_1').empty().append(some_data_here); 

, 나는 버튼이 위젯의 ​​sub_header에 클릭 내용에 로딩 이미지를 앞에 추가하려면, 그래서 시도 :

은 내가 사용하고있는 것을해야 할 일

$(this).closest('.widget_1').find('.widget_content_1').prepend("<img class='imgLoading' src='/img/loading_white_32.gif'></img>"); 

이것은 단지 클릭 한 버튼에 위젯의 로딩 이미지를 표시 점에서 작동하지만 화면에 2 widget_1 년대이 경우는 클릭 widget_1 2 개 이미지를 표시하고, 5를 표시합니다 클릭 한 이미지를 0 개 화면에 widget_1이 있으면입니다.

왜 그런 일이 발생합니까?

화면에 widget_1이 몇 개 있더라도 클릭 한 widget_1에로드 이미지 1 개만 표시되어야합니다.

Answer 1

이 코드를 다음과 같습니다

$('.my_button').live('click',function() { 
    get_data($(this)); 
}); 

를 실행합니다 한 번 각 사용자가 만든 위젯 만. live() 단일 통화가 click 이벤트가에 거주 중 위젯 .my_button 일치하는 모든 요소에서 버블 링 "을 참조하십시오"하는 위임 처리기를 설치하기 때문에, 불필요한, 실제로 비생산적이다. 당신이이

해당 코드가 한 번만 실행될 수있는 방법을 찾으십시오 (가능하다면 위젯의 공통 초기화 루틴에서 가능).

live()은 jQuery 1.7부터 on()으로 대체되어 사용되지 않습니다. 위의 코드는 다음과 같습니다.

$(document).on("click", ".my_button", function() { 
    get_data($(this)); 
});