Предотвращение события дочернего элемента при нажатии родителя

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 не работает. Когда я нажимаю на диапазон, вызывается функция UpdateAndRefreshTable. Как предотвратить это. Мне нужна функция для работы только на клике divMenuContainer.

Answer 1

К началу барботирования события к родительскому элементу, добавить привязку к дочернему элементу и использовать event.stopPropagation()

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

Answer 2

Вы на самом деле связывание события spnMenuContainer, поэтому stopPropagation() события фактически останавливая событие из пузыри вверх от spnMenuContainer, а не от divMenuContainer.

Попробуйте связывание с divMenuContainer и используя stopPropagation() вместо:

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

Обратите внимание, что вам не нужна функция find(). Идентификаторы должны быть уникальными, поэтому достаточно просто использовать селектор #BtnResubmit.

Answer 3

На самом деле вы делаете это неправильно. С помощью текущего кода вы регистрируете событие для дочернего элемента при нажатии родителя.

Так что если у вас есть какое-либо событие, связанное с родителем, то вы должны использовать event.stopPropagation() на дочернем элементе, чтобы остановить событие bubbleup к родителю, как это:

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

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

просто переместить его из события родительского клика и положить его вне его.