Re-Execute Javascript after Ajax Success

Question

I have a list of posts on a page that when hovered over reveal a overlay that says 'read more'. At the bottom of the page is an button that runs an ajax function to get more posts. After the ajax has successfully loaded the 'read more' thumbnail overlay no longer reveals on mouse over.

This has to be because the javascript has executed already, and I've loaded more elements into the dom. How can I re-execute the same JS function to allow for the new posts to have the overlay as well?

I've tried re-running my function on ajax success, but it didn't seem to do anything. No error or anything.

JavaScript

jQuery(".thumboverlay").mouseenter(function() {
                    jQuery(this).stop().animate({
                        opacity: 1
                    });
                });

                    jQuery(".inspiration-project-title").mouseenter(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 1
                        });
                    });

                jQuery(".thumboverlay").mouseleave(function() {
                    jQuery(this).stop().animate({
                        opacity: 0
                    });
                });
                    jQuery(".inspiration-project-title").mouseleave(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 0
                        });
                    });

HTML/PHP

<a href='.get_permalink().'>
   <div class="inspirations-page-featured-image">
     <div class="thumboverlay">
       <p>READ MORE</p>
      </div>'.$printFeaturedImage.'
    </div>
</a>

Ajax

// ajaxLoop.js  
jQuery(function($){  
    var page = 1;  
    var loading = true;  
    var $window = $(window);  
    var $ajaxLoadMoreButton = $("body.blog .ajaxLoadMoreButton");  
    var $content = $("body.blog #container");  
    var load_posts = function(){  
            $.ajax({  
                type       : "GET",  
                data       : {numPosts : 1, pageNumber: page},  
                dataType   : "html",  
                url        : "wp-content/themes/twentytwelve/loopHandler.php", 
                beforeSend : function() {  
                    if(page !=0) {  
                         $ajaxLoadMoreButton.before('<div id="temp_load" style="text-align:center"><img src="wp-content/themes/twentytwelve/images/ajax-loader.gif" /></div>');                          
                    }  
                },  
                success    : function(data){  
                    $data = $(data);  
                    if($data.length){  
                        $data.hide();  
                        $content.isotope('insert', $(data) );
                        $data.fadeIn(500, function(){  
                            $("#temp_load").remove();  
                            loading = false;  
                        });
                    } else {  
                        $("#temp_load").remove();  
                        $ajaxLoadMoreButton.fadeOut().before('<p class="no-more-posts-warning">Sorry, there are currently no more posts to load.</p>');
                    }  
                },  
                error     : function(jqXHR, textStatus, errorThrown) {  
                    $("#temp_load").remove();  
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
                }  
        });  
    }  

    $ajaxLoadMoreButton.click(function() {                  
                loading = true;  
                page++;  
                load_posts();   
    });  

});

It wouldn't help. The function is 300+ lines long. I just need an understanding of how to refire the function. — EHerman
– EHerman, Commented Dec 11, 2013 at 1:26
We're not asking for 300 lines of code. We're asking for you to post the essentials of how you're "wiring and firing" things, with a bit of HTML markup to show it off, so we can help you... — ErikE
– ErikE, Commented Dec 11, 2013 at 1:27
Spend some time at jsfiddle.net and if you can get your code in there and paste a link to it here on SO, I can almost guarantee you will have a very good answer in less than 5 minutes. — RustyToms
– RustyToms, Commented Dec 11, 2013 at 1:28
We need to see what the ajax function is doing that is causing the problem in the first place. — jfriend00
– jfriend00, Commented Dec 11, 2013 at 1:30

jfriend00 · Accepted Answer · 2013-12-11 01:24:47Z

1

There are a couple possible solutions here:

Create a new function that will find just the newly added elements and hook up the appropriate event handlers for them and call that function in the success handler of the ajax function after the new elements have been loaded.
Use delegated event handling that will work on newly added elements automatically.
Change how you're adding new elements. Don't do things like elem.innerHTML += htmlstring because that recreates all existing elements ruining their event handlers.

Which one is better or exactly how to implement any of them depends upon your HTML and what you're doing with your javascript so we can't really advise more specifically without seeing your exact situation (relevant HTML and JS).

answered Dec 11, 2013 at 1:24

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eggward · Accepted Answer · 2013-12-11 01:47:37Z

1

As jfriend00 suggested, you can use delegated event handling. In Jquery you can do it like.

$( "body" ).delegate( ".ajaxLoadMoreButton", "click", function() {
                  loading = true;  
                page++;  
                load_posts();   
});

This will bind the function to all elements matching the selector now and the future (when n new elements are added in the page) Read more here about delegate

edited Dec 11, 2013 at 1:47

answered Dec 11, 2013 at 1:40

eggward

3451 silver badge5 bronze badges

Comments

EHerman · Accepted Answer · 2013-12-11 01:40:36Z

I was eventually able to re-fire the function after shifting some things around and adding that section of the overall function to its own individual function.

function re_fire_hoverStates() {
   jQuery(".thumboverlay").mouseenter(function() {
                    jQuery(this).stop().animate({
                        opacity: 1
                    });
                });

                    jQuery(".inspiration-project-title").mouseenter(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 1
                        });
                    });

                jQuery(".thumboverlay").mouseleave(function() {
                    jQuery(this).stop().animate({
                        opacity: 0
                    });
                });
                    jQuery(".inspiration-project-title").mouseleave(function() {
                        jQuery(this).parent(".brick").find(".thumboverlay").stop().animate({
                            opacity: 0
                        });
                    });
}

Then I did ran the function for the first time on page load, $(document).ready(re_fire_hoverStates);

and then ran the function again, as you had suggested, on Ajax success:

// ajaxLoop.js  
jQuery(function($){  
    var page = 1;  
    var loading = true;  
    var $window = $(window);  
    var $ajaxLoadMoreButton = $("body.blog .ajaxLoadMoreButton");  
    var $content = $("body.blog #container");  
    var load_posts = function(){  
            $.ajax({  
                type       : "GET",  
                data       : {numPosts : 1, pageNumber: page},  
                dataType   : "html",  
                url        : "wp-content/themes/twentytwelve/loopHandler.php", 
                beforeSend : function() {  
                    if(page !=0) {  
                         $ajaxLoadMoreButton.before('<div id="temp_load" style="text-align:center"><img src="wp-content/themes/twentytwelve/images/ajax-loader.gif" /></div>');                          
                    }  
                },  
                success    : function(data){  
                    $data = $(data);  
                    if($data.length){  
                        $data.hide();  
                        $content.isotope('insert', $(data) );
                        $data.fadeIn(500, function(){  
                            $("#temp_load").remove();  
                            loading = false;
                            re_fire_hoverStates();  
                        });
                    } else {  
                        $("#temp_load").remove();  
                        $ajaxLoadMoreButton.fadeOut().before('<p class="no-more-posts-warning">Sorry, there are currently no more posts to load.</p>');
                    }  
                },  
                error     : function(jqXHR, textStatus, errorThrown) {  
                    $("#temp_load").remove();  
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
                }  
        });  
    }  
    $ajaxLoadMoreButton.click(function() {                  
                loading = true;  
                page++;  
                load_posts();   
    });  
});

Collectives™ on Stack Overflow

Re-Execute Javascript after Ajax Success

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related