Ошибка делегирования события из-за разницы в целевом элементе между браузерами - PullRequest
Новая
       16

Ошибка делегирования события из-за разницы в целевом элементе между браузерами

2 голосов
/ 20 мая 2011

Это упрощенная выдержка из DOM: 

<td>
    <button value="11" class="expand ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="">
        <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
        <span class="ui-button-text"></span>
    </button>
</td>

Это повторяется для каждой строки в таблице (~ 500), и таблица имеет идентификатор 'eventTable'

Вот экземпляр кнопки (jQueryUI): 

$('.expand').each(function(){
    $(this).button({
        text: false,
        icons: {
            primary: "ui-icon-plus"
        }
    });
});

Вот часть делегирования события в таблице # eventTable 

$('#eventTable').click(function(e){
    if($(e.target).is('.expand'){
        // ...

Теперь, в Firefox 3.6.x, IE7,8, это работает и входит в оператор if. Однако в Safari и Chrome e.target представляет первый span вместо окружающего button.

Почему это происходит? Я могу пройти мимо этого, но мне бы хотелось получить объяснение, чтобы потом не столкнуться с той же проблемой в другом сценарии. Почему Webkit прав, а Trident / Gecko не прав? Чем обусловлена ​​разница?

1 Ответ

2 голосов
/ 20 мая 2011

Публикация комментария в качестве ответа.

Если вы просто не хотите получать тонну click ссылок на обработчики в вашей DOM, я бы посоветовал вам использовать .delegate(). Он «привязывает» только один обработчик к контексту и проверяет, соответствует ли цель события выбранному вами селектору, и запускает обработчик, если это так.

Что-то вроде 

$('#eventTable').delegate('click', '.expand', function() {
    // click on the .expand element/s
});

должно хватить.

...