jQuery class selector oddness

Question

Я использую jQuery для изменения фонового изображения кнопки в зависимости от класса, связанного с ним при наведении. Однако это работает, только если я помещаю инструкции наведения в отдельные функции. Почему это?

Вот рабочий код NON, всегда оценивает оператор .submit hover, даже если этот класс удален с помощью события keyup.

$(function() { 
    { 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
    //$(this).removeClass('submithover'); 

}); 

$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 

    }}); 

Рабочий код:

$(function() { 
    { 


$('.submit').hover(function() 
{ 
    $(this).css({backgroundPosition: "left bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "left top"}); 
    //$(this).removeClass('submithover'); 

}); 
    }}); 

    $('#test').bind('keyup', function() { 

    if (url == 'devel') { 
    $("#submit").addClass("submit-getinfo").removeClass("submit"); 

$('.submit-getinfo').hover(function() 
{ 
    $(this).css({backgroundPosition: "right bottom"}); 
}, function() { 
    $(this).css({backgroundPosition: "right top"}); 
//$(this).removeClass('submithover'); 

}); 
    } }); 

Я просто не понимаю, почему я должен поставить заявления зависать в отдельных функциях, а не торчит как в главном DOM.

Answer 1

Вам нужно повторно организовать ваш код немного используя .live(), как это:

$(function() { 
    $('.submit-getinfo').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "right bottom"}); 
    }).live('mouseleave' function() { 
     $(this).css({backgroundPosition: "right top"}); 
    }); 

    $('.submit').live('mouseenter', function() { 
     $(this).css({backgroundPosition: "left bottom"}); 
    }).live('mouseleave', function() { 
     $(this).css({backgroundPosition: "left top"}); 
    }); 
}); 

В настоящее время он говорит, «найти элементы с этим классом, связать эту функцию парения тем», теперь это Безразлично что вы меняете класс, потому что функция уже привязана к событиям jQuery этого элемента и mouseleave ... даже если это изменения класса, которые не связаны друг с другом.

С .live() однако, обработчик события не связан с самим элементом, это связано с document, ожидая mouseenter и mouseleave событий пузыриться, он оценивает, если элемент вызывает события соответствует право Селектор теперь, и выполняется, если это так ... так что если вы измените класс, то будет вопрос, смысл?