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有plugins，它适合你。

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

3 个答案: