Ajax分页后，Jquery事件无法正常工作(Jquery Event not working after Ajax Pagination)

Ajax分页后，Jquery事件无法正常工作(Jquery Event not working after Ajax Pagination)

下面是我正在使用的代码，我一直在使用.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"); }); });

更新代码使用.on而不是.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补充道：

Below is the code i am working with, i have been using .mouseenter(function () { with no problems... I have been reading that when you use .live() it applies the events to existing & new dom elements but for some reason now the function isnt working at all, is there something wrong with my syntax?

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

updated code to use .on instead of .live... the animation is working with the first set of posts but everything that ajax has loaded with pagination is still not triggering the event...

<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 added :\

最满意答案

要将其作为委托侦听器执行此操作，第一个选择器应该是Ajax内容的祖先。 在进行ajax调用时永远不会被破坏的东西。

$('#neverDestroyed').on('mouseenter', '.actualTarget', function() {
  // stuff happens when .actualTarget has mouse enter it
});
 
 如果我是诚实的话，代码有点“太长了;没有阅读”，但是当应用于你自己的选择器时，上面应该排除你。 
To do this as a delegated listener, the first selector should be an ancestor of your Ajax content. Something that is never destroyed when the ajax call is made. 
 
$('#neverDestroyed').on('mouseenter', '.actualTarget', function() {
  // stuff happens when .actualTarget has mouse enter it
});
 
The code was a bit "too long; didn't read" if I'm being honest, but the above should sort you out when applied to your own selectors.