$('#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 和按钮,则会调用两次请求,依此类推。
谢谢
最佳答案
没有必要在另一个 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();
});
});
关于javascript - 如何停止此代码中的事件冒泡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11865740/