Jquery事件在Ajax分页之后不工作 [英] Jquery Event not working after Ajax Pagination
本文介绍了Jquery事件在Ajax分页之后不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我正在使用的代码，我一直在使用.mouseenter（function（）{没有问题...我一直在阅读，当你使用.live（）它将事件应用于现有的&新的dom元素，但由于某种原因现在函数根本没有工作，我的语法有什么问题吗？
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");
});
});
更新代码使用.on而不是.live ...动画正在与第一组的帖子，但是ajax加载分页的所有内容仍然没有触发事件...
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：\
html added :\
推荐答案
要作为委托监听器执行此操作，第一个选择器应该是Ajax内容的祖先。在进行ajax调用时，从未被破坏的东西。
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.
这篇关于Jquery事件在Ajax分页之后不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
