jQuery - Hover после изменения DOM

Question

С $('#sidebar').toggleClass('small'); Im добавление добавления/удаления указанного класса от #sidebar.

Когда #sidebar имеет класс small Я был в состоянии выполнить дополнительные действия, когда пользователь наводил верх над #sidebar.small.

Я пытался добиться этого с кодом внизу:

$("#sidebar.small").on({ 
    mouseenter: function() { 
     alert(1); //doesn't work 
}, 
    mouseleave: function() { 
     //stuff to do on mouse leave 
    } 
}); 

Но это не работает.

Как мне выполнить функцию наведения на измененный элемент DOM?

Answer 1

Вы должны быть в состоянии использовать метод JQuery парения, чтобы сделать это: https://api.jquery.com/hover/

Обновление: К сожалению заметил еще одну вещь ... если изначально установить обработчик событий, не #sidebar имеют CSS тег или не? Как ваш код написан, если он этого не сделает, он попытается подключиться к элементу $ ("# sidebar.small"), поэтому, если тэг css не существует, он не будет прикрепляться ни к чему.

Я думаю, что вы хотите больше, как это:

$("#sidebar").on({ 
    mouseenter: function() { 
     if($('#sidebar').hasClass('small')) { 
      alert(1); 
     } 
    } 
}); 

Update снова опечатка, извините ...

Answer 2

Jquery только связывает обработчики для найденных элементов в момент связывания.

Решение состоит в том, чтобы переустановить соответствующие обработчики при добавлении класса.

jsfiddle

код из скрипки:.

$('#foo').click(function(){ 
    $('<span></span>') 
    .text('A Span') 
    .appendTo('#container'); 
}); 

$('#bar').click(function(){ 
    $('span').first().toggleClass('small'); 
    bindHover();  
}) 

function bindHover(){ 
    $('span.small').unbind('hover'); // Avoid re-binding something 
    $('span.small').hover(function(){ 
     alert('a') 
    }); 
} 

bindHover();