0

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

joel dalmas
  • 47
  • 8
  • 1
    jquery version??? because in new jquery ,.live() method is depreciated. use .on() instead. – Priyank Patel May 19 '12 at 07:23
  • 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... – joel dalmas May 19 '12 at 07:30
  • I would also suggest that in conjunction with .on() that you should use .off() as well, because it could cause your event to execute multiple times. – jacqijvv May 19 '12 at 07:32
  • can you give me an example of how to do that? – joel dalmas May 19 '12 at 07:33
  • $('div',this).off("mouseleave").on("mouseleave", function() { ...}); – jacqijvv May 19 '12 at 07:34
  • What does firebug say when the jquery is executed? – jacqijvv May 19 '12 at 07:35
  • I am sorry but I really dont even know how to check that exactly? Any chance you would share? Which tab in firebug? – joel dalmas May 19 '12 at 07:39
  • As your code stands, it's not delegated like live, but would be the same as just using `click()`. Also, it seems you are using `this` without any sort of scope other than the document, which does not make much sense? Actually your selectors does not make sense at all, please post some HTML and tell us what elements you are trying to select. – adeneo May 19 '12 at 07:40
  • Thanks for commenting adeneo, i added the html above :) – joel dalmas May 19 '12 at 07:45

2 Answers2

2

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.

Greg Pettit
  • 10,749
  • 5
  • 53
  • 72
  • because i am applying a certian styling to nth-child(1) & (2) and a different styling for nth-child(3)&(4) my selectors are a bit more complex and im not sure how to use them with the method you provided..? --- $("div#rows div.row div:nth-child(1)",this).nextUntil('nth-child(2)') – joel dalmas May 19 '12 at 07:54
  • Looks like div#rows can be your listener (neverDestroyed) and the rest can replace actualTarget. – Greg Pettit May 19 '12 at 07:57
  • $('#rows').on('mouseenter', "div#rows div.row div:nth-child(1), div#rows div.row div:nth-child(2)",this , function() { – joel dalmas May 19 '12 at 08:09
  • No problem! You don't need to repeat div#rows inside the .on(), though -- the selector will match (so, it'll work) but you've already set it to listen inside of #rows, so it's a given. Glad to help. – Greg Pettit May 19 '12 at 08:17
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);
});
adeneo
  • 312,895
  • 29
  • 395
  • 388