jquery - 当目标与选择器不匹配时触发 jQuery 事件

Question

我有以下标记:

<table>
    <tbody>
        <tr>
            <td>
                <a href="javascript:void(0)" class=expand>click me</a>
                <span>some other content</span>
            </td>
            <td>
                click me too
            </td>
        </tr>
    </tbody>
</table>

我正在将行的点击处理程序附加到表中:

$('table').on('click', 'tr :not(".expand")', function(evt) {
    if (! $(evt.target).is(selector)) {
        console.log('event is firing even though target doesnt match the selector!!!');
    } else {
        console.log('event is firing as expected');
    }
});

var selector = $('table').data('events').click[0].selector;

JSFiddle

我希望事件仅在其源自与 tr :not(".expand") 匹配的元素时触发选择器(条件的 else 部分)，但事件无论如何都会触发。

如何将回调绑定(bind)到 <table> 处的事件元素，使其仅在不是 .expand 时触发被点击的元素？

说明:如果用户单击 <span>some other content</span>，事件处理程序仍应执行。

Answer 1

我相信你想要这个:

$('table').on('click', 'tr td:not(:has(".expand"))', function(evt) {
    console.log("Event only fires when clicking something that doesn't contain an expando");
});

var selector = $('table').data('events').click[0].selector;

jsFiddle