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

Question

我已经将以下内容剥离回裸骨，我传递更多属性来调用我的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">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);
}});

Answer 2

当你将事件绑定到document你不能阻止点击冒泡回到文档（它在事件处理程序触发之前已经在那里冒泡，否则事件处理程序不会触发）。

要最小化冒泡量，请将事件处理程序绑定到分配事件时DOM中存在的.cbcall元素的最近父元素。 这样，事件将仅冒泡到该元素（假设您调用event.stopPropagation() ）。

Answer 3

我在以下代码中遇到了类似的问题：

$(window).on('load resize', function() {
    $('a.ajaxlink').on('click tap', function(e) {
    // function
    }
}

为防止在窗口调整大小后单击事件冒泡，我只需在on（'click tap'）之前添加off（）：

$(window).on('load resize', function() {
    $('a.ajaxlink').off().on('click tap', function(e) {
    // function
    }
}