Добавлено несколько элементов в селекторе, как .load () только один раз?

Question

Действительно урезанная версия:

Сценарий два селектора Я анимирую и затем загружаю внешнюю страницу с помощью .load() Кажется, load() запускается дважды для element_A и element_B ... Есть ли способ сделать так, чтобы он срабатывал только один раз?

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

   //...

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

   //...

});

Answer 1

Используйте флаг, чтобы указать, что .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;
    }
});

Вы можете установить его обратно на false в обратном вызове для load, если необходимо.

Или, если причина, по которой он запускается дважды, заключается в том, что один из элементов в селекторе вложен внутри другого, то это происходит потому, что событие пузырится.event.stopPropagation() ^{(документы)} метод.

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

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

});

Answer 2

Патрик Д. заложил основу для решения.Нужно добавить какой-то индикатор, чтобы нагрузка запускалась только один раз.

$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

});