Проблем с .on() и AJAX

Question

У меня есть эти строки в моем заголовке

$(document).ready(function() { 

    $(".thumb").hide(); 
    $(".thumb").first().show(); 
    $(".text").mouseenter(function() { 
    $(this).prev(".thumb").show(); 
     }).mouseleave(function() { 
    $(this).prev(".thumb").hide(); 
    }); 

}); 

Они работают нормально при загрузке страницы, но как только я загружаю новый контент HTML с помощью AJAX, эти линии быть игнорируются.

В моих предыдущих вопросах какой-то нежный человек сказал мне использовать .on() Хорошо. Но как применить этот .on() к моему коду выше?

Я знаю, что это глупый вопрос для большинства из вас, но я абсолютный новичок и Я бы очень признателен, если бы кто-то мог дать полезные советы.

Answer 1

ваш код будет что-то вроде этого (открытой для модификаций)

$(document).ready(function() { 
    $(".thumb").hide(); 
    $(".thumb").first().show(); 
    $(document).on('mouseenter',".text",function(){ $(this).prev(".thumb").show(); }) 
    $(document).on('mouseleave',".text",function(){ $(this).prev(".thumb").hide(); }) 
    });