我已将以下内容精简为最基本的内容,我正在传递更多属性以在我的 ajax 中调用特定信息。
$(document).on("click", ".call", function(){
$.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){
$("#LoadArea").html(result);
}});
});
$(document).on("click", ".cbcall", function(){
$.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){
$("#LoadArea").html(result);
}});
});
上面是我正在使用的 Jquery 的示例,下面是我正在使用的 html。
<p class="call">click here to load</p>
<div id="LoadArea"></div>
当单击单击此处加载时,showform.asp 页面内容将加载到 LoadArea div 中。 showform.asp内容如下
<div class="call">
<input type="checkbox" class="cbcall">
</div>
问题是,如果我单击复选框(.cbcall),事件就会冒泡并加载 showform.asp。我对 Jquery 相当陌生,所以我想知道如何停止事件冒泡,但仍然能够选中和取消选中 showform.asp 中加载的复选框。
我尝试过返回 false;但这不会选中该复选框。
有人能指出我正确的方向吗?
更新 - 调整代码以匹配建议
我已经更新了我的起始页面以匹配 Nicola 的代码(感谢 Nicola)
$(document).ready(function(){
$(".call").on("click", function(e){
//check that event is originated by a <p class="call"> element
if($(e.target).is('.call')){
alert('.call actioned');
$.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}});
}
});
$( ".call").on("click", ".cbcall", function(e){
alert('radio actioned');
//Stop immediate propagation
e.stopImmediatePropagation();
$.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}});
});
});
<p class="call">click here to load</p>
<div id="LoadArea"></div>
<!-- additonal code below here -->
<div class="call">
<input type="checkbox" class="cbcall">
</div>
此外,我已将 showform.asp 的内容添加到页面底部,并向 Jquery 添加了一些警报。
当我单击 <p class="call">click here to load</p>
时或<input type="checkbox" class="cbcall">
在初始页面上,功能正常工作,警报触发并加载ajax,但是当我仅使用 <p class="call">click here to load</p>
时并尝试从 ajax 加载的 showform.asp 页面进行相同的调用,但没有任何反应。
最佳答案
问题是您正在文档级别捕获事件,因此它已经冒泡了!
编辑 - 由于第二个元素是动态添加的,你应该这样做
$(".call").on("click", function(e){
//check that event is originated by a <p class="call"> element
if($(e.target).is('p.call')){
$.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){
$("#LoadArea").html(result);
}});
}
});
$( ".call").on("click", ".cbcall", function(e){
//Stop immediate propagation
e.stopImmediatePropagation();
$.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){
$("#LoadArea").html(result);
}});
关于jquery - Jquery 中使用 .on 停止事件冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9429348/