Does AJAX loaded content get a "document.ready"? Does AJAX loaded content get a "document.ready"? jquery jquery

Does AJAX loaded content get a "document.ready"?


To answer your question: No, document.ready will not fire again once a ajax request is completed. (The content in the ajax is loaded into your document, so there isn't a second document for the ajax content).

To solve your problem just add the event listener to the Element where you load the ajax content into it.For example:

$( "div.ajaxcontent-container" ).on( "click", "#id-of-the-element-in-the-ajax-content", function() {  console.log($( this ));});

For #id-of-the-element-in-the-ajax-content you can use any selector you would use in $("selector"). The only difference is, only elements under div.ajaxcontent-container will be selected.

How it works:As long as div.ajaxcontent-container exists all elements (if they exist now or only in the future) that match the selector #id-of-the-element-in-the-ajax-content will trigger this click-event.


Javascript in the resulting ajax call will not be excecuted (by default) due to safety. Also, you can't directly bind event to non-existing elements.
You can bind an event to some parent that does exist, and tell it to check it's children:

$(document).ready(function(){    $(document).on('eventName', '#nonExistingElement', function(){ alert(1); }    // or:    $('#existingParent').on('eventName', '#nonExistingElement', function(){ alert(1); }});

Always try to get as close to the triggering element as you can, this will prevent unnessesary bubbling through the DOM


If you have some weird functions going on, you could do something like this:

function bindAllDocReadyThings(){    $('#nonExistingElement').off().on('eventName', function(){ alert(1); }    // Note the .off() this time, it removes all other events to set them again}$(document).ready(function(){    bindAllDocReadyThings();});$.ajaxComplete(function(){    bindAllDocReadyThings();});


try this, that is not working because your control is not yet created and you are trying to attach a event, if you use on event it will work fine. let me know if you face any issues.

$(document).ready(function(){    $(document).on('click', '#element', function (evt) {        alert($(this).val());    });});