问题
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 :\
回答1:
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.
回答2:
Still not really sure what it is your trying to do, but you only really need one document.ready, and I don't get what's up with selecting the first child until the second child etc. Why not just apply it to all of them, and if the animated values change use an array of values and get the right one based on element index, ID, or somehing else.
$(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);
});
来源：https://stackoverflow.com/questions/10663150/jquery-event-not-working-after-ajax-pagination