jquery - jQuery .on() 和 .not()

Question

html

<li class="feed">
    <a data-uid="15" data-fid="23" href="http://domain">
        <img src="imageurl.com" class="favicon">
        <span>Website Title</span>
        <span class="options">delete</span>
    </a>
</li>

jQuery

$(document).on('click', '.col-l .feed a', function(e){
    e.preventDefault();
    //do something
});

$('.options').click(function(){
    var fid = $(this).parent().attr('data-fid');
    var uid = $(this).parent().attr('data-uid');
    console.log(fid);
    console.log(uid);
});

每当我单击deletejQuery.on运行以及.options. 有没有办法.options点击它会忽略该.on()功能？

我试过$(document).on('click', '.col-l .feed a:not(.options)', function(e){但没有成功

Answer 1

当然，您只需要阻止.options点击传播 DOM 树。例如（您还需要添加preventDefault到事件中）：

$(document).on('click', '.col-l .feed a', function(e){
    e.preventDefault();
    //do something
});

$('.options').click(function(e){
    e.stopPropagation();
    e.preventDefault();
    var fid = $(this).parent().attr('data-fid');
    var uid = $(this).parent().attr('data-uid');
    console.log(fid);
    console.log(uid);
});

这是一个jsFiddle demo