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。

或者如果它被触发两次的原因是选择器中的一个元素嵌套在另一个元素中，那么这是因为事件正在冒泡。

您可以使用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);

});

Answer 2

patrick 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

});

在Selector中添加了多个元素如何.load（）只有一次？

2 个答案: