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">时，警报会启动，但是当我只使用<p class="call">click here to load</p>并尝试相同的时候会加载ajax来自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
    }
}

为了防止在窗口调整大小后点击事件冒泡，我只需在开启之前添加off（）（＆＃39;点击点击＆＃39;）：

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

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

3 个答案: