Selector에서 여러 요소를 한 번만 .load()하는 방법을 추가 했습니까?

Question

정말 벗었 버전 :

시나리오 I의 애니메이션이 다음 그것은 load()가 triggerd이 element_A 및 element_B 두 번 것 같다 .load() 를 사용하여 외부 페이지를로드하고이 선택기 ... 은 그것을 가지고하는 방법이 있나요 한 번 트리거 해?

$('.element_A, .element_B').click(function(){ 

    //... 

    $(".element_C").load("someFile", etc); 

    //... 

}); 

Answer 1

패트릭 DW 솔루션을위한 기반을 구축. 로드가 한 번만 트리거되도록하려면 일종의 지표를 추가해야했습니다.

$temp_LoadCounter = 0; // added 

$('.element_A, .element_B').click(function(){ 

    //... 

    $temp_LoadCounter += 1; // added 

    if ($temp_LoadCounter == 1) { // added 

     $(".element_C").load("someFile", etc); 

    //... 

    } // added 

}); 

Answer 2

깃발을 사용하여 .load()이 이미 실행되었는지 나타냅니다. 필요한 경우

var triggered = false; // our flag 

$('.element_A, .element_B').click(function(){ 
     // if it hasn't run yet, run it and set "triggered" to "true" 
    if(!triggered) { 
     $(".element_C").load("someFile", etc); 
     triggered = true; 
    } 
}); 

당신은 load에 대한 콜백 다시 false로 설정할 수 있습니다.

또는 두 번 실행하는 이유는 선택기의 요소 중 하나가 다른 내부에 중첩되어있는 경우 이벤트가 버블 링되기 때문입니다.

return false; 또는 event.stopPropagation()^(docs) 방법으로 버블 링을 방지 할 수 있습니다.

$('.element_A, .element_B').click(function(event){ 
     // prevent the event from bubbling and triggering the handler again 
    event.stopPropagation(); 

    $(".element_C").load("someFile", etc); 

});