Issues with .on() and AJAX

Question

I have these lines in my header

$( document ).ready(function() {

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

});

They work fine on page load, but as soon as I'm loading new HTML content with AJAX, these lines are being ignored.

In my previous questions, some gentle person told me to use .on() Okay. But how do I apply this .on() to my code above?

I know it's a dumb question for most of you, but I'm an absolute beginner and I'd really appreciate it, if some could give some helpful advice.

score 1 · Accepted Answer · answered Nov 04 '14 at 21:39

your code would be something like this (open to modifications)

  $(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(); })
  });

Issues with .on() and AJAX

1 Answers1