JQuery Live Hover

161

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

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

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

jquery live jquery-1.4

— Jorre
источник

245

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

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

function () {

});

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

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

    },
    mouseleave: function () {

    }
});

— Филипп Лейбер
источник

Это все еще не работает для меня все же. Я пытался сделать это: где я иду не так? > $ ('table tr'). live ('hover', function () {$ (this) .find ('. deletebutton'). toggle ();});

— Шрипад Кришна

1

это неверно и не работает. см. заголовок «Несколько событий» под документацией для live: api.jquery.com/live

— Джейсон

34

Начиная с jQuery 1.4.2, .live ("hover") эквивалентен .live ("mouseover mouseout"), NOT .live ("mouseenter mouseleave") - см. Bugs.jquery.com/ticket/6077 Итак, сделайте. live ("mouseenter mouseleave", function () {...}) или .live ("mouseenter", function () {...}). live ("mouseleave", function () {...})

— 2010 г.

2

спасибо @aem, у меня это сработало: $ ("table tr"). live ("mouseenter", function () {...}). live ("mouseleave", function () {...});

— Jackocnr

3

Согласно странице документации JQuery.live он говорит, чтобы использовать .onвместо. "Начиная с jQuery 1.7, метод .live () устарел. Используйте .on () для присоединения обработчиков событий."

— johntrepreneur

110

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

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

— dmitko
источник

У меня тоже сработало. +1 Пробовал делать версию Филиппа, как при наведении курсора, так и при наведении мышки - ни сработало. Но этот сделал. Спасибо!

— eduncan911

.liveустарела, см. ответ Андре за способ замены.

— johntrepreneur

1

Использование mouseoverи mouseoutсобытий здесь будет вызывать непрерывный запуск кода, когда пользователь перемещает мышь внутри элемента. Я думаю mouseenterи mouseleaveболее уместно, так как он будет срабатывать только один раз при входе.

— johntrepreneur

60

.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

— Andre
источник

6

это работает безупречно с jquery 1.9. все живые и делегированные решения УСТАРЕЛИ! было бы замечательно, если бы кто-то мог отклонить принятый ответ и вместо этого принять этот.

— Яша

5

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

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

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

— Тату Ульманен
источник

5

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

    $(".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");
            }
        });

— Хорхе Э. Кардона
источник

2

Что такое "UI-State-hover"? Как это относится к первоначальному вопросу пользователя?

— Игорь Ганапольский

2

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

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

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

— Брайан
источник

2

полезный, но больше комментарий, чем ответ.

— mikemaccana