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

[英]Stop event bubbling with .on in Jquery


I have stripped the following back to the bare bones, I am passing more attributes around to call specfic information in my ajax.

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

Above is an example of the Jquery I am using and below is the html I am using.

上面是我正在使用的Jquery的示例,下面是我正在使用的html。

<p class="call">click here to load</p>
<div id="LoadArea"></div>

When the click here to load is clicked the showform.asp page content is loaded into the LoadArea div. The content of the showform.asp is as follows

单击此处加载单击时,showform.asp页面内容将加载到LoadArea div中。 showform.asp的内容如下

<div class="call">
    <input type="checkbox" class="cbcall">
</div>

The issue is that if I click on the checkbox(.cbcall) the event bubbles up and the showform.asp gets loaded. I am fairly new to Jquery so I would like to know how to stop event bubbling but still be able to check and uncheck the checkbox that is loaded in showform.asp.

问题是如果我点击复选框(.cbcall),事件会冒泡并且showform.asp会被加载。我是Jquery的新手,所以我想知道如何停止事件冒泡,但仍然能够检查并取消选中showform.asp中加载的复选框。

I have tried return false; but this will not check the checkbox.

我试过返回假;但这不会勾选复选框。

Can anybody point me in the right direction?

任何人都能指出我正确的方向吗?

UPDATE - Tweaked code to match suggestion

更新 - 调整代码以匹配建议

I have updated my starting page to match Nicola's code (thanx Nicola)

我更新了我的起始页以匹配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>

In addition I have added the contents of the showform.asp to the bottom of the page and added some alerts to the Jquery.

此外,我已将showform.asp的内容添加到页面底部,并向Jquery添加了一些警报。

When I click on either the <p class="call">click here to load</p> or the <input type="checkbox" class="cbcall"> on the initial page functions work, the alerts fires and the ajax loads but when I use just the <p class="call">click here to load</p> and try the same calls from the ajax loaded showform.asp page nothing happens.

当我在初始页面功能工作时点击

点击此处加载 时,警报会触发和ajax加载,但当我只使用

点击这里加载 并尝试从ajax加载的showform.asp页面调用相同的调用没有任何反应。

3 个解决方案

#1


5  

The problem is that you are capturing the event at the document level and so it has already bubbled up!

问题是你正在文档级别捕获事件,所以它已经冒出来了!

EDIT - Since the second element is dynamically added you should do

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

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

#2


2  

As you've bound the event to the document you can't prevent the click from bubbling back to the document (it's already bubbled there before the event-handler fires, otherwise the event-handler wouldn't fire).

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

To minimise the amount of bubbling, bind the event-handler to the closest parent-element of the .cbcall element that exists in the DOM at the time the events are assigned. That way the event will bubble only to that element (provided you call event.stopPropagation()).

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

#3


0  

I had a similar issue within the following code:

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

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

To prevent the click event bubbling on click after window resize I simply added off() before the on('click tap') :

为防止在窗口调整大小后单击事件冒泡,我只需在on('click tap')之前添加off():

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/02/24/bf5f11e9310ca3a88ffcbc9170d0afe4.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com