div <a> 子元素上的事件停止传播

Question

事件停止传播不适用于我的以下代码

<div id="notif_msg" class="messages" style="display: block;">
<a href="/fotos.php?pag=galeria&amp;view=315" class="message" id="2788">
    <span id="2788" style="color:white;">TRY</span>
</a>

然后我用这个jquery来停止它的事件

$( '#notif_msg a.message' ).live("click",function( event ) {
       event.stopPropagation();
    });

我的疯狂猜测是我点击了我的 span 元素而不是 a 元素。我正在使用实时事件，因为我附加了一些其他元素。

请帮忙。

更新----这是我的ajax动态加载我的通知

function loadnotif(myid){

    $.ajax({
            type: "POST",
            url: "fragmentos/ajax/loadnotif.php",
            data:{"myid":myid},
            dataType: 'json',
            cache: false,
            success: function(html)
            {  
                $('#notif_msg').append(html.data);
                if(html.newnot == 1){
                    $('#noti-container').removeClass('noticon');
                    $('#noti-container').addClass('noticon-active');
                }                     
            }                   
      });
}

Answer 1

问题是您正在使用事件委托，live() 会将处理程序附加到文档对象，这意味着事件已经到达树的顶部并且没有更多的传播

如果要停止传播，需要将处理程序直接绑定到元素

$('#notif_msg a.message').click(function (event) {
    event.stopPropagation();
});

注意：您应该使用 jQuery < 1.9 才能使 live 正常工作，因此我假设您使用的是 jQuery < 1.9。但是，如果您使用 .on() 进行事件委托

，同样的原则也适用

div <a> 子元素上的事件停止传播

event stopPropagation on div <a> child element

jquery

event-handling

javascript-events