javascript - 如何在此代码中停止事件冒泡？

Question

$('#div1').on('click', '#otherDiv1', function(event){       
        //Show popup
        $('#popupDiv').bPopup({
            modalClose: false,
            follow: [false, false],
            closeClass: 'close'
        });             
        event.stopPropagation();

        $('#div2').on('click', '#otherDiv2', function (event) { 

             // here is ajax request         

            // close popup          
            $('#popupDiv').bPopup().close();
            event.stopPropagation();
        });

    }

多次点击 otherDiv2 调用 ajax 函数，如何停止？

HTML 代码

<div id="div2">

<div id="div1"><div id="otherDiv1">Click</div></div>

    <div id="popupDiv"><div class="close">X</div> 
        <input id="otherDiv2" name="otherDiv2" type="submit" value="Click" />   
    </div>
</div>

popupDiv 是动态创建的

当我单击 otherDviv1 时，弹出窗口打开，里面是一个用于 ajax 请求的按钮。当我单击按钮时，会调用一个请求并关闭弹出窗口。如果我再单击一次 otherDiv1 和按钮，则会调用两次请求，依此类推。

谢谢

Answer 1

它没有必要click在另一个中绑定第二个click。您的代码绑定click到#otherDiv2每个click到#otherDiv1. 对于以下过程不需要stopPropagation().

$('#div1').on('click', '#otherDiv1', function(event) {
    //Show popup
    $('#popupDiv').bPopup({
        modalClose: false,
        follow: [false, false],
        closeClass: 'close'
    });
});

$('#div2').on('click', '#otherDiv2', function(event) {

    // here is ajax request         
    // close popup          
    $('#popupDiv').bPopup().close();
});

但是，如果您需要在另一个事件中绑定事件，则首先取消绑定该事件#otherDiv2，然后再次绑定。

$('#div1').on('click', '#otherDiv1', function(event) {
    //Show popup
    $('#popupDiv').bPopup({
        modalClose: false,
        follow: [false, false],
        closeClass: 'close'
    });

    $('#div2').off('click').on('click', '#otherDiv2', function(event) {

      // here is ajax request         
      // close popup          
      $('#popupDiv').bPopup().close();
   });
});

Answer 2

我想你可以使用

event.stopImmediatePropagation()

停止冒泡。

http://api.jquery.com/event.stopImmediatePropagation/

Answer 3

如果您使用相当新版本的 jQuery，每个 ajax 请求都会返回Deferred对象，您可以将其存储在单击处理程序的外部范围中并进行分析，以便取消现有请求或只是不启动新请求。

还有一个称为节流的概念，并且有适用于您的 jquery插件。