jQuery перезаписывает прослушиватели событий?

У меня есть куча div, каждый из которых содержит ссылку на удаление, прикрепленную к событию click ниже:

  var observeRemoveRoom = function
    $('.remove_room').click(function(){     
      $(this).parent().removeClass('active');
    });
  }

Щелчок по нему удаляет «активный» класс родителя (div). Я вызываю эту функцию observeRemoveRoom при загрузке окна, которая отлично работает.

Дело в том, что у меня есть еще одна функция, которая добавляет больше таких же элементов div. Поскольку ссылок a.remove_room, содержащихся в новых элементах div, не было на window.load, мне нужно вызвать observeRemoveRoom.

Я как-то дублирую обработчики событий? jQuery перезаписывает их? Если да, то должен ли я отвязать обработчики?


javascript jquery jquery-events jquery-click-event
person digitalWestie    schedule 11.07.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Каждый раз, когда вы вызываете observeRemoveRoom, jQuery будет добавлять новую уникальную функцию обработчика событий для события click.

Так что да, вам нужно .unbind() либо все привязанные в настоящее время обработчики, просто вызвав .unbind() без аргументов, либо быть конкретным и передать ссылку на функцию.

person jAndy    schedule 11.07.2012

arrow_upward
1
arrow_downward

Вы можете попробовать активный запрос, чтобы обновлять их: http://docs.jquery.com/Plugins/livequery< /а>

person mamapitufo    schedule 11.07.2012
comment
А что это за плагин? Просто используйте on() с селектором. - person Bergi; 11.07.2012
comment
on() будет присоединять события только к результатам запроса в то время, когда вы его вызвали. Живые запросы добавляют/удаляют события при изменении DOM. - person mamapitufo; 11.07.2012
comment
Нет, не при изменении DOM, а при вызове метода jQuery. Ура. Лучше использовать делегированные события. - person Bergi; 11.07.2012

arrow_upward
1
arrow_downward

Да, вы будете дублировать обработчики событий, если снова вызовете observeRemoveRoom, но это может быть незаметно, поскольку вы вызываете только метод removeClass, который ничего не делает, если класс не найден, что произойдет после того, как первый прослушиватель будет сработал.

Вместо этого вы можете каждый раз отвязывать и повторно привязывать событие клика, например:

 var observeRemoveRoom = function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    $('.remove_room').off('click', remove_class).on('click', remove_class);
  }

Но при этом рекомендуется делать это вне этой функции, а не привязывать и отвязывать событие каждый раз, например:

$(document).ready(function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    // If the element exists at dom ready, you can bind the event directly
    $('.remove_room').on("click", remove_class);
    // If the element is added in dynamically, you can [delegate][1] the event
    $('body').on("click", '.remove_room', remove_class);
    // Note: Although I've delegated the event to the body tag in this case
    // I recommend that you use the closest available parent instead
});

http://api.jquery.com/on/#direct-and-delegated-events : [1]

person S P    schedule 11.07.2012