Question

标记如下。

<span id="spnMenuContainer" class="Menu">
  <div id="divContainer" class="SubMenu">                            
    <div id="BtnResubmit" class="basicbutton">Resubmit</div>
  </div>
</span>

我的项目中有一些jquery代码就像这样。

$("#spnMenuContainer").bind("click",function(e){
   /*----
   some other code here
   -----*/
   $("#divMenuContainer").find("#BtnResubmit").bind("click",function(){
      UpdateAndRefreshTable('resub');
   });
   e.stopPropagation();
});

但我猜stopPropagation方法不起作用。当我单击span时，正在调用UpdateAndRefreshTable函数。如何防止这种情况。我需要该功能仅适用于divMenuContainer点击。

Answer 1

要将事件冒泡到父元素，请向子元素添加绑定并使用event.stopPropagation()

$("#BtnResubmit").on('click',function(e){
    e.stopPropagation();
    UpdateAndRefreshTable('resub');
})

Answer 2

您实际上已将事件绑定到$("#Select_All").change(function () { $("#Parent_Id, #Child_Id").prop("checked", this.checked); }); $("#Parent_Id").change(function(){ //var i=0; var isParentChecked = $(this).prop('checked'); $('.Child_Class').each(function(){ //i++; //var newID='#Child_Id'+i; //console.log(newID); //$(this).attr('id', newID); //$(this).val(i); $(this).prop("checked",isParentChecked); }); });，因此spnMenuContainer事件实际上是阻止事件从stopPropagation()冒出，而不是从spnMenuContainer冒出来。

尝试绑定到divMenuContainer并使用divMenuContainer代替：

stopPropagation()

请注意，您不需要$('#BtnResubmit').on('click', function(e) { e.stopPropagation(); UpdateAndRefreshTable('resub'); });功能。 ID应该是唯一的，因此仅使用find()选择器就足够了。

Answer 3

其实你做错了。使用当前代码，您在单击父元素时为子元素注册事件。

因此，如果您在父级上绑定了任何事件，那么您必须在子元素上使用event.stopPropagation()来阻止事件冒泡到父级，如下所示：

$("#spnMenuContainer").bind("click",function(e){
   /*----
   some other code here
   -----*/
});

$('#BtnResubmit').on('click', function(ev) {  
    ev.stopPropagation();
    UpdateAndRefreshTable('resub');
});

将其从父点击事件中移出并将其放在其外面。

防止在单击父元素时触发子元素的事件

3 个答案: