jquery live hover

Question

Я использую следующий код jquery, чтобы показать контекстную кнопку удаления только для тех строк таблицы, которые мы наводим мышью. Это работает, но не для строк, которые были добавлены с помощью js / ajax на лету ...

Есть ли способ заставить это работать с живыми событиями?

$("table tr").hover(
  function () {},
  function () {}
);

Answer 1

jQuery 1.4.1 теперь поддерживает "hover" для событий live (), но только с одной функцией-обработчиком событий:

$("table tr").live("hover",

function () {

});

В качестве альтернативы, вы можете предоставить две функции, одну для ввода мыши и одну для отпускания мыши:

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

Answer 2

$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

Answer 3

.live() устарело с jQuery 1.7

Вместо этого используйте .on() и укажите селектор потомков

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector

Answer 4

Этот код работает:

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });

Answer 5

Начиная с jQuery 1.4.1, событие hover работает с live(). По сути, он просто привязывается к событиям mouseenter и mouseleave, что также можно делать с версиями до 1.4.1:

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

Это требует двух связываний, но работает так же хорошо.

Answer 6

ПРЕДУПРЕЖДЕНИЕ: существует значительная потеря производительности с живой версией hover. Это особенно заметно на большой странице IE8.

Я работаю над проектом, в который мы загружаем многоуровневые меню с помощью AJAX (у нас есть свои причины :). Во всяком случае, я использовал живой метод для наведения, который отлично работал на Chrome (IE9 сделал хорошо, но не отлично). Однако в IE8 он не только замедлял меню (вам пришлось зависать на пару секунд, прежде чем он упал), но все на странице было мучительно медленным, включая прокрутку и даже проверку простых флажков.

Связывание событий непосредственно после их загрузки привело к адекватной производительности.