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 中绑定(bind)第二个 click。在每次 click 到 #otherDiv1 时，你的代码将 click 绑定(bind)到 #otherDiv2。对于以下过程不需要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();
});

但是如果您需要在另一个事件中绑定(bind)事件，那么首先从 #otherDiv2 中解除绑定(bind)事件，然后再次绑定(bind)。

$('#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();
   });
});