JQuery Событие не работает после Ajax Pagination

Question

Ниже приведен код, с которым я работаю, я использовал .mouseenter (function() {без проблем ... Я читал, что когда вы используете .live(), он применяется события к существующему & новых элементов DOM, но по какой-то причине теперь функция разве работают вообще, есть что-то не так с моим синтаксисом?

$(document).ready(function(){ 
    $("div#rows div.row div:nth-child(1)",this).nextUntil('nth-child(2)').on("mouseenter", function() { 
     $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    }); 
    $('div',this).off("mouseleave").on("mouseleave", function() { 
     $('img',this).stop().animate({"bottom":"94px"}, "fast");  
    }); 

}); 

$(document).ready(function(){ 
    $("div#rows div.row div:nth-child(3)",this).nextUntil('nth-child(4)').on("mouseenter", function() { 
     $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    }); 
    $('div',this).off("mouseleave").on("mouseleave", function() { 
     $('img',this).stop().animate({"bottom":"99px"}, "fast");  
}); 

}); 

обновленного код для использования .она вместо .live ... анимация работает с первым набором сообщений, но все, что ajax загрузило с разбивкой по страницам, все еще не запускает событие ...

<div id="content"> 

    <div id="rows"> 


<div class="row row-1">  
    <div class="loop-0 post-66"> 
     <div class="post_data"> 
      <div class="icons_right"> 
       <a type="readmore" href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a> 
      </div> 
      <h1 class="post_title"> 
       <a href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico"> 
       Salina Cruz | Mexico</a> 
      </h1> 
      <h2 class="post_snippet">Lorem ipsum dolor</h2> 
      <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p> 
     </div> <!-- post_data //--> 
     <a href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico"><img width="1600" height="1200" src="http://samplewebsite.com/wp-content/uploads/2012/05/surfer3.jpg" class="attachment-post-image wp-post-image" alt="surfer3" title="surfer3" /></a> 
    </div> <!-- 1 //--> 

    <div class="loop-1 post-62"> 
     <div class="post_data"> 
      <div class="icons_right"> 
       <a type="readmore" href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a> 
      </div> 
      <h1 class="post_title"> 
       <a href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver"> 
       Wakeboard Rails | Quick Silver</a> 
      </h1> 
      <h2 class="post_snippet">Lorem ipsum dolor</h2> 
      <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p> 
     </div> <!-- post_data //--> 
     <a href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver"><img width="1280" height="1024" src="http://samplewebsite.com/wp-content/uploads/2012/05/wakeboard1.jpg" class="attachment-post-image wp-post-image" alt="wakeboard1" title="wakeboard1" /></a> 
    </div> <!-- 1 //--> 

    <div class="loop-2 post-59"> 
     <div class="post_data"> 
      <div class="icons_right"> 
       <a type="readmore" href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a> 
      </div> 
      <h1 class="post_title"> 
       <a href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida"> 
       Jeremy Johnston | Florida</a> 
      </h1> 
      <h2 class="post_snippet">Lorem ipsum dolor</h2> 
      <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p> 
     </div> <!-- post_data //--> 
     <a href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida"><img width="1280" height="1024" src="http://samplewebsite.com/wp-content/uploads/2012/05/surfer6.jpg" class="attachment-post-image wp-post-image" alt="surfer6" title="surfer6" /></a> 
    </div> <!-- 1 //--> 

    <div class="loop-3 post-56"> 
     <div class="post_data"> 
      <div class="icons_right"> 
       <a type="readmore" href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a> 
      </div> 
      <h1 class="post_title"> 
       <a href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive"> 
       Caribbean Waters | Duck Dive</a> 
      </h1> 
      <h2 class="post_snippet">Lorem ipsum dolor</h2> 
      <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p> 
     </div> <!-- post_data //--> 
     <a href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive"><img width="1280" height="960" src="http://samplewebsite.com/wp-content/uploads/2012/05/girl2.jpg" class="attachment-post-image wp-post-image" alt="girl2" title="girl2" /></a> 
    </div> <!-- 1 //--> 

html добавлено: \

Answer 1

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

$('#neverDestroyed').on('mouseenter', '.actualTarget', function() { 
    // stuff happens when .actualTarget has mouse enter it 
}); 

Код был немного «слишком долго, не читал», если я честен, но выше разбирайтесь вас применительно к своим собственным селекторов.

Answer 2

Все еще не совсем уверен, что именно вы пытаетесь сделать, но вам действительно нужен только один документ. Уже нет, и я не понимаю, что с выбором первого ребенка до второго ребенка и т. Д. Почему бы просто не применить его для всех из них, и если анимированные значения меняются, используйте массив значений и получите правильное значение на основе индекса элемента, идентификатора или другого.

$(document).ready(function(){ 
    var elms = $("#rows > .row").children(); 
    var ani = ['94', '94', '99', '99']; 

    $(document).on({ 
     mouseenter: function(e) { 
      $('img', e.target).stop().animate({"bottom":"0px"}, "fast"); 
     }, 
     mouseleave: function(e) { 
      var i = $(this).index(); 
      $('img', e.target).stop().animate({"bottom": ani[i]}, "fast"); 
     } 
    }, elms); 
});