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

【问题标题】：Stop event bubbling with .on in Jquery在 Jquery 中使用 .on 停止事件冒泡
【发布时间】：2012-03-14 19:41:23
【问题描述】：

我已经将以下内容剥离了，我正在传递更多属性以在我的 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 中加载的复选框。

我试过 return 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 页面没有任何反应。

【问题讨论】：

标签： jquery ajax checkbox

【解决方案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);
}});

【讨论】：

+1，尽管我认为 OP 中的 on() 调用是这样设置的，因为 .cbcall 和 .call 元素是动态的。
感谢大家到目前为止的帮助，但虽然我不希望 .cbcall 冒泡到 showform.asp 中的 .call 我仍然需要 showform.asp 中的 .call 来操作。我正在构建的网站在初始加载和各种 ajax 调用中使用 .call - 抱歉不清楚
@decker27 我只留下了两个事件处理程序的代码，我只是使用 event.target 来避免触发不需要的 ajax 调用
@decker27 如果这回答了你的问题，你应该接受答案:)

【解决方案2】：

当您将事件绑定到 document 时，您无法阻止点击冒泡返回到文档（在事件处理程序触发之前它已经冒泡，否则事件-handler 不会触发）。

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

【讨论】：

【解决方案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
    }
}

【讨论】：