Изменить изображение div при наведении мыши и вернуться при наведении мыши

Я пытаюсь изменить изображение на mousedown и вернуться к исходному изображению на mouseup. Изображение меняется на mousedown, но не возвращается к исходному изображению на mouseup. Предупреждение в функции mouseup не появляется... Что не так?

$(#mydivid).bind('mousedown', function() {
        document.getElementById(mydivid).style.backgroundImage = "url(Images/new.png)";
        alert("mousedown");
    });


    
    $(#mydivid).bind('mouseup', function() {
        document.getElementById(mydivid).style.backgroundImage = "url(Images/initial.png)";
alert("mouseup");
    });

Я заметил, что когда я привязываю более одного события к одному и тому же div, первый обработчик событий работает, а остальные игнорируются... Как я могу гарантировать, что все события обрабатываются?


person user930514    schedule 18.04.2012    source источник


Ответы (1)


Вы должны избавиться от предупреждений. Это вызывает проблему.

Еще я заметил, что '#mydivid' не заключен в кавычки.

Кроме того, если вы используете jquery 1.7+, рекомендуется использовать «on» вместо «bind».

Начиная с jQuery 1.7, метод .on() является предпочтительным методом для присоединения обработчиков событий к документу. В более ранних версиях метод .bind() использовался для присоединения обработчика событий непосредственно к элементам.

Источник: http://api.jquery.com/bind/

JQuery также имеет метод для изменения свойств CSS элемента. Может быть, вы могли бы рассмотреть это тоже для изменения фона.

http://api.jquery.com/css/


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

http://jsfiddle.net/fS9Ct/1/

person w00    schedule 18.04.2012