How can I call a function after an element has been created in jquery?

user_613932 0
Viewed 99354

I want to call a function after an element has been created. Is there a way to do this?

Example:

$("#myElement").ready(function() {
    // call the function after the element has been loaded here
    console.log("I have been loaded!");
});
loaded jquery javascript
9 Answers

Creating an element does not mean much, unless it is inserted into the page. I think that is what you mean by ready function.

The onLoad event is limited to certain elements only, and is not supported for div or p elements. You have to options:

You can use setInterval function to check the existence of the element. Once the element is found, you can clear the interval:

var CONTROL_INTERVAL = setInterval(function(){
    // Check if element exist
    if($('#some-element').length > 0){
        // Since element is created, no need to check anymore
        clearInterval(CONTROL_INTERVAL);
    }
}, 100); // check for every 100ms

The second and the more idiomatic way is adding a mutation observer on the target element, and checking if the element is one of the elements inserted elements whenever target is mutated, i.e new element is added:

let el = document.createElement("div");
el.innerHTML = "New Div";

const targetNode = document.querySelector("body");

const observerOptions = {
  childList: true,
  attributes: true,
  subtree: false
};

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      const isAdded = node.isEqualNode(el);
      console.log(isAdded);
    });
  });
}

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

document.body.appendChild(el);

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

There are two more alternatives, adding event listener for DOMNodeInserted or DOMNodeInsertedIntoDocument events but since MutationEvent is deprecated, it is best to avoid them.

https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent

user_71341340

you can try this code

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
  width: 100px;
  background: red;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

user_59069220

old thread, but in my case i had a situation with a big append-tree, and i wanted to do some initialization in-line so to speak, and did the following:

$("<div>").append(
  ...
  $("<div>").foo(...).bar(...).etc(...).each(function(){
    // init code to run after chain of init functions called
  })
...    
)
user_13739400
Related