jquery - Jquery 中使用 .on 停止事件冒泡

Question

我已将以下内容精简为最基本的内容，我正在传递更多属性以在我的 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 页面进行相同的调用，但没有任何反应。

Answer 1

问题是您正在文档级别捕获事件，因此它已经冒泡了!

编辑 - 由于第二个元素是动态添加的，你应该这样做

$(".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);
}});