jQuery doesn't work after content is loaded via AJAX

Question

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

Answer 1

This worked for me,

instead of:

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

I did:

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

Answer 2

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

Answer 3

// 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'
        });
    }

Answer 4

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

Answer 5

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 ;)

Answer 6

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