Does AJAX loaded content get a "document.ready"?
addeventlistener, document-ready, event-handling, jquery
Solution
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.
Problem
Yesterday I had an issue where a `.on('click')` event handler I was assigning wasn't working right. Turns out it's because I was was trying to apply that `.on('click')` before that element existed in the DOM, because it was being loaded via AJAX, and therefore didn't exist yet when the `document.ready()` got to that point. I solved it with an awkward workaround, but my question is, if I were to put a `<script>` tag IN the ajax loaded content and another `document.ready()` within that, would that second `document.ready()` be parsed ONLY once that ajax content is done being loaded? In other words, does it consider that separately loaded ajax content to be another `document`, and if so, does having another `document.ready()` within that ajax-loaded HTML work the way I think it does? Alternatively; what would be a better way to handle this situation? (needing to attach an event listener to a DOM element that doesn't yet exist on `document.ready()`)