jQuery on ('hover') Замена события

Question

Я ищу замену img src на hover. Обычно я хотел бы использовать:

$('#img').hover(function() { 
    $(this).attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

Однако я загружаю содержание в Ajax с помощью так обычно я хотел бы использовать:

$('#main').on('hover', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

Но я читал, что («зависание», .. .) был устаревшим в jQuery 1.8 и удален в 1.9 (jQuery Docs), что я и сейчас использую. У кого-нибудь есть какие-либо работы, кроме использования:

$('#main').on('mouseenter', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

$('#main').on('mouseleave', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/old-img.jpg'); 
}); 

Answer 1

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

$('#main').on('mouseenter', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}).on('mouseleave', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/old-img.jpg'); 
}); 

И как Benjamin комментарии ниже, вы можете оптимизировать дальше (вы получите простой старый JavaScript очков времени):

$('#main').on('mouseenter', '#img', function() { 
    this.src = 'http://www.example.com/new-img.jpg'; 
}).on('mouseleave', '#img', function() { 
    this.src = 'http://www.example.com/old-img.jpg'; 
}); 

Answer 2

можно применить несколько события и затем проверить event.type так:

$('#main').on('mouseenter mouseleave', '#img', function(e) { 
    $(this).attr('src', 'http://www.example.com/' + (e.type == 'moseenter' ? 'new-img.jpg' : 'old-img.jpg')); 
}); 

jsFiddle

Вы можете также использовать switch-case или if/else:

$('#main').on('mouseenter mouseleave', '#img', function(e) { 
    switch(e.type) { 
     case 'mouseenter': 
      $(this).attr('src', 'http://www.example.com/new-img.jpg'); 
      break; 
     case 'mouseleave': 
      $(this).attr('src', 'http://www.example.com/old-img.jpg'); 
      break; 
    } 
} 

Answer 3

Вот альтернативный подход, который не требует никаких JavaScript вообще:

Вместо использования <img> с src атрибут использовать DIV, дайте что Див тот же идентификатор (не забудьте указать ему нужную ширину и высоту).

В вашем CSS, дайте что divbackground-image что-то вроде:

#img{ 
    background-image: url('http://www.example.com/old-img.jpg'); 
} 

О :hover изменении его

#img:hover{ 
    background-image: url('http://www.example.com/new-img.jpg'); 
} 

(fiddle)