Запустите событие 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), но событие инициируется независимо.

Как связать обратный вызов с событием в элементе <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

Answer 2

Попробуйте использовать .is(...) и event.target:

$('table').on('click', 'tr :not(".expand")', function(evt) {
    if ($(evt.target).is('tr :not(".expand")')) {
        alert('clicked it!');
    }
    else {
        alert('not')
    }
});​

Fiddle: http://jsfiddle.net/maniator/h9yh7/

Answer 3

Если вы хотите обработать .expand, а не вызывать щелчок строки,

$('table').on('click', '.expand', function(evt) {
    evt.stopPropagation(); 
    console.log('expand clicked!');
});

jQuery.stopPropagation()