发表新帖
发表新帖

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

前端 未结
关注
9 2142
野趣味
野趣味 2020-12-28 13:37

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
相关标签:
9条回答
  • 面向向阳花
    2020-12-28 14:06

    Sometimes this is needed for a DOM element created/loaded outside of your own script, either by a different js library or an event outside of your direct control.

    For such scenarios, I always set an interval which checks periodically whether the target element exists and if this is true, the interval deletes itself and runs a callback function.

    For this, I have a predefined function which I reuse:

    function runAfterElementExists(jquery_selector,callback){
    var checker = window.setInterval(function() {
     //if one or more elements have been yielded by jquery
     //using this selector
     if ($(jquery_selector).length) {

        //stop checking for the existence of this element
        clearInterval(checker);

        //call the passed in function via the parameter above
        callback();
        }}, 200); //I usually check 5 times per second
}

//this is an example place in your code where you would like to
//start checking whether the target element exists
//I have used a class below, but you can use any jQuery selector
runAfterElementExists(".targetElementClass", function() {
    //any code here will run after the element is found to exist
    //and the interval has been deleted
    });
    0 讨论(0)
  • 你的背包
    2020-12-28 14:09

    The most straight-forward is to directly invoke the callback after creating the element :)

    0 讨论(0)
  • 终归单人心
    2020-12-28 14:11

    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>

    0 讨论(0)
  • 长发绾君心
    2020-12-28 14:18

    You may want to look into jQuery live events. You attach an event handler to a selector that either matches now or after additional elements are created in your DOM.

    So if you have a <ul> and you dynamically create new <li> items, in your $(document).ready() you can wire up a selector to an event handler so that all of your <li> elements will be wired for that event.

    Here's a jsFiddle sample that demos live.

    Hope this helps.

    0 讨论(0)
  • 小鲜肉
    2020-12-28 14:18

    check out .live() its best after the element created,,

    $('.clickme').live('click', function() {
      // Live handler called.
});

    And then later add a new element:

    $('body').append('<div class="clickme">Another target</div>');
    0 讨论(0)
  • 遇见更好的自我
    2020-12-28 14:18

    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
  })
...    
)
    0 讨论(0)
 看不清?
提交回复
热议问题