jQuery - Attaching load events to the dynamically loaded elements

Question

I have a set of elements which are loaded and hence injected dynamically into the DOM. I have a script which requires the elements to be fully loaded for it to work properly. Assume the following code:

$(".element").width();

Which if put into the $(document).ready() works properly. But my scenario is a little different, the element is dynamically loaded into the page; therefore, I need a load event on the $(".element") which itself is loaded dynamically. Now:

$(".element").load()

doesn't work as it is not loaded in the page by default, I have used $("body").on("load", ".element", function(){...});

But to no avail, still it does nothing. What should I do now?

My Question: How should I bind a load event to an element which is created dynamically.

http://stackoverflow.com/questions/7434685/event-when-element-added-to-page — Roko C. Buljan, Apr 12 '16 at 21:34
How is it loaded? Chances are it's some kind of ajax or programmatically injected with a plugin. Both cases should have a callback you can use to execute code after the content is loaded into the DOM. — Joseph Marikle, Apr 12 '16 at 21:53

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Dynamically listen for specific elements added via AJAX

ajaxSuccess^Docs will trigger whenever a successful AJAX response is received.
Let's use it so see if any specific selector was added to the DOM

jsBin example

Imagine this trivial HTML:

<button>Load something</button>
<div id="receiver"></div>

we want to load something into #receiver on a button click:

$("button").on("click", function(){
  $("#receiver").load("page.html");  
});

First some magic:

// Elements load listener
var listenElementLoad = function(selector, callback) {
  var $ex = $(selector);
  $(document).ajaxSuccess(function(event, xhr, settings) {
    var $html = $(xhr.responseText),
        $ch = $html.find(selector),
        $el = $html.is(selector) ? $html : $ch[0] ? $ch : null;
    if($el) return callback( $(selector).not($ex) );
  });
};

Than the below call will trigger at any moment in time when a desired selector (element/s) is added to our DOM, and retrieves it:

// Listen for newly added class ".element"
listenElementLoad(".element", function( $el ) {
  $el.css({color:"red"});
});

jsBin example

score 1 · Answer 2 · answered Apr 12 '16 at 22:01

Even if it's deprecated, see DOMNodeInserted, you may use this event to detect newly created elements:

window.onload = function() {
  document.body.addEventListener("DOMNodeInserted", function (e) {
    alert('New ele created: ' + e.target.outerHTML);
  }, false);
  document.getElementById('addNewElements').addEventListener('click', function(e) {
    var lis = document.querySelectorAll('li');
    var nextValue = +lis[lis.length - 1].textContent;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(nextValue + 1);
    node.appendChild(textnode);
    document.querySelectorAll('ul')[0].appendChild(node);
  });
}

<div>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>
<p>This is a paragraph</p>
<button id="addNewElements">Add new elements</button>

@RokoC.Buljan I consider your answer valid, my is only an attempt. — gaetanoM, Apr 12 '16 at 22:11
I have used a better approach. Using `setInterval()` in combination with `setTimeout()` and some state-managing flags have given me all I wanted. — Mostafa Talebi, Apr 13 '16 at 09:39

jQuery - Attaching load events to the dynamically loaded elements

2 Answers2

Dynamically listen for specific elements added via AJAX