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

我已经将以下内容剥离回裸骨,我传递更多属性来调用我的ajax中的specfic信息.

$(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的代码(thanx 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”>时点击此处加载< / p>或者< input type =“checkbox”class =“cbcall”>在初始页面功能工作,警报触发和ajax加载但是当我只使用< p class =“call”>点击此处加载< / 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);
}});