67

On this page I have a jQuery popup window and thumbnail resizable images. If I mouse over on the thumbnails, the images are resizing perfectly. Also, when I click on the big yellow TV button "QuickBook TV" in the footer, the popup appears perfectly as I want it to.

However, when I click on the "Next" or "Prev" buttons, AJAX is used to load the new content and my jQuery no longer functions for the popup or thumbnail images. I have searched a number of forums looking for information on this issue, but due to having limited knowledge of jQuery I've been unable to understand what I need to do.

Following is the popup jQuery

$(document).ready(function() {

        $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
        $(".inline").colorbox({ inline: true, width: "50%" });
        $(".callbacks").colorbox({
            onOpen: function() { alert('onOpen: colorbox is about to open'); },
            onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
            onClosed: function() { alert('onClosed: colorbox has completely closed'); }
        });

        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function() {
            $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
            return false;
        });
    });

And this is the thumbnails jQuery

$(function() {

var xwidth = ($('.image-popout img').width())/1;
var xheight = ($('.image-popout img').height())/1;

$('.image-popout img').css(
        {'width': xwidth, 'height': xheight}
); //By default set the width and height of the image.

$('.image-popout img').parent().css(
        {'width': xwidth, 'height': xheight}
);

$('.image-popout img').hover(
    function() {
        $(this).stop().animate( {
            width   : xwidth * 3,
            height  : xheight * 3,
            margin : -(xwidth/3)
            }, 200
        ); //END FUNCTION

        $(this).addClass('image-popout-shadow');

    }, //END HOVER IN
    function() {
        $(this).stop().animate( {
            width   : xwidth,
            height  : xheight,
            margin : 0
            }, 200, function() {
                $(this).removeClass('image-popout-shadow');
    }); //END FUNCTION

    }
);

});
0

9 Answers 9

128

jQuery selectors select matching elements that exist in the DOM when the code is executed, and don't dynamically update. When you call a function, such as .hover() to add event handler(s), it only adds them to those elements. When you do an AJAX call, and replace a section of your page, you're removing those elements with the event handlers bound to them and replacing them with new elements. Even if those elements would now match that selector they don't get the event handler bound because the code to do that has already executed.

Event handlers

Specifically for event handlers (i.e. .click()) you can use event delegation to get around this. The basic principle is that you bind an event handler to a static (exists when the page loads, doesn't ever get replaced) element which will contain all of your dynamic (AJAX loaded) content. You can read more about event delegation in the jQuery documentation.

For your click event handler, the updated code would look like this:

$(document).on('click', "#click", function () {
    $('#click').css({
        "background-color": "#f00",
        "color": "#fff",
        "cursor": "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
});

That would bind an event handler to the entire document (so will never get removed until the page unloads), which will react to click events on an element with the id property of click. Ideally you'd use something closer to your dynamic elements in the DOM (perhaps a <div> on your page that is always there and contains all of your page content), since that will improve the efficiency a bit.

The issue comes when you need to handle .hover(), though. There's no actual hover event in JavaScript, jQuery just provides that function as a convenient shorthand for binding event handlers to the mouseenter and mouseleave events. You can, however, use event delegation:

$(document).on({
    mouseenter: function () {
        $(this).stop().animate({
            width: xwidth * 3,
            height: xheight * 3,
            margin: -(xwidth / 3)
        }, 200); //END FUNCTION

        $(this).addClass('image-popout-shadow');
    },
    mouseleave: function () {
        $(this).stop().animate({
            width: xwidth,
            height: xheight,
            margin: 0
        }, 200, function () {
            $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION

    }
}, '.image-popout img');

jQuery plugins

That covers the event handler bindings. However, that's not all you're doing. You also initialise a jQuery plugin (colorbox), and there's no way to delegate those to elements. You're going to have to simply call those lines again when you've loaded your AJAX content; the simplest way would be to move those into a separate named function that you can then call in both places (on page load and in your AJAX requests success callback):

function initialiseColorbox() {
    $(".iframe").colorbox({
        iframe: true,
        width: "1000px",
        height: "500px"
    });
    $(".inline").colorbox({
        inline: true,
        width: "50%"
    });
    $(".callbacks").colorbox({
        onOpen: function () {
            alert('onOpen: colorbox is about to open');
        },
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');
        },
        onCleanup: function () {
            alert('onCleanup: colorbox has begun the close process');
        },
        onClosed: function () {
            alert('onClosed: colorbox has completely closed');
        }
    });
}
8
  • Great Thanks dude for the help. The Big problem, image thumbnails issue is resolved. But Colorbox popop issue still there. Can you please guide me how can I call it on page load and in Ajax request? Apr 17, 2013 at 15:28
  • 1
    @AwaisImran Move it to a separate function (as suggested in the latter half of my answer), then call that in place of those lines in your $(document).ready() function to handle page load. All AJAX functions in jQuery take an (optional) success callback function, which will execute when the response is successful. You then just need to call the function inside that; I could be more specific if you included the relevant AJAX call(s) in your question. Apr 17, 2013 at 15:30
  • Hey Anthony, I have fixed the popup issue. I change this script "$(document).ready(function() { " to this line"$(document).on('mouseover', '.iframe', function() {" and it is working fine for me. Thank you so much for all your support. I wish I could become jquery expert like you :) Apr 18, 2013 at 1:11
  • Great answer. Helped me with AJAX issues that I had in some of my functions. May 9, 2014 at 11:36
  • 1
    @pXdty No, that wouldn't work in this case. The code would run without errors, but that binds a static event handler; it only affects elements that exist when the code runs. The whole point here is that all of the elements that would match "selector" don't exist when the code runs, so you need the delegated event handler. Aug 15, 2014 at 8:10
30

Had the same problem before I was able to found the solution which worked for me. So if anyone in future can give it a shot and let me know if it was right since all of the solutions I was able to find were a little more complicated than this.

So as said by Tamer Durgun, we will also place your code inside ajaxStop, so your code will be reinstated each time any event is completed by ajax.

$( document ).ajaxStop(function() {

//your code

}

Worked for me :)

6
  • I tried all: .done, .complete, .always, duplicate success, i mean, all. Nothing worked except this. Thank you a lot :)
    – jechaviz
    Jul 15, 2016 at 4:39
  • Happy to be of assistance :) Jul 15, 2016 at 8:32
  • 1
    Thanks @Angad ..this actually works. Wondering how come this has not been accepted as correct answer to the question. Sep 29, 2016 at 11:32
  • 1
    This does seem to work. However it is also worth to point out that ajaxStop(...) would be triggered ONLY WHEN you actually have an ajax component (duh). And it would NOT be triggered when your entire page being load initially. In other words, you might end up needing BOTH $(document).read(function(){/*your code*/}) AND $(document).ajaxStop(function(){/* your code again*/}).
    – RayLuo
    May 26, 2019 at 2:31
  • so did you find a way instead of duplicating the code??
    – stoneshaq
    Nov 27, 2020 at 0:18
4
// EXAMPLE FOR JQUERY AJAX COMPLETE FUNC.
$.ajax({
    // get a form template first
    url: "../FPFU/templates/yeni-workout-form.html",
    type: "get",
    success: function(data){
        // insert this template into your container
        $(".content").html(data);
    },
    error: function(){
        alert_fail.removeClass("gizle");
        alert_fail.addClass("goster");
        alert_fail.html("Template getirilemedi.");
    },
    complete: function(){
        // after all done you can manupulate here your new content
        // tinymce yükleme
        tinymce.init({
            selector: '#workout-aciklama'
        });
    }
3

Your event handlers are being lost when you replace the content. When you set you hover events, jQuery is setting them on the events on the page currently. So when you replace them with ajax, the events are not associated with those elements because they are new.

To fix this you can either call the function that binds them again or you can instead set the event handler on the document as in this answer using $(document).on

That way the event is set on the document and any new elements will get the event called.

1

You Can User jQuery's delegate() method which Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.In my case it's working as expected

this $(selector).click(function(e){}

become this after Using delegate() method

$( "body" ).delegate( "selector", "click", function(e) {}

Hope this will help ;)

0

You can use jQuery ajax's complete function after retrieving data form somewhere, it will see updated elements after ajax complete

1
  • added an example below Mar 30, 2016 at 7:49
0

This worked for me,

instead of:

$(document).ready(function(){
//code
});

I did:

$(document).on('mouseenter', function(){
//code
});
0

I'm late to the party but I would combine two of the answers. What worked for my specific needs was to incorporate the ajaxstop within the complete

complete: function () {
     $( document ).ajaxStop(function() {
         //now that all have been added to the dom, you can put in some code for your needs.
         console.log($(".subareafilterActive").get().length)

     })
}
0

Just an alternative.

$(window).on('load', _ => {
    // some jQuery code ..
})

This binds any delegated handler to the window. It will fire once the window is fully loaded including all graphics/includes/hooks/requests not just the DOM.

$(document).ready(_ => ... preserves events to be fired after only the DOM is ready which does not apply on dynamically loaded content by AJAX. Either you can run a function or any event when a specific element is fully loaded by defining it as @Anthony Grist explained in his answer or bind your load event to the window as shown above.

https://api.jquery.com/load-event/
https://api.jquery.com/on/#on-events-selector-data-handler

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.