在 jquery 中创建元素后如何调用函数？答案

【问题标题】：How can I call a function after an element has been created in jquery?在 jquery 中创建元素后如何调用函数？
【发布时间】：2011-06-17 13:02:35
【问题描述】：

我想在创建元素后调用一个函数。有没有办法做到这一点？

例子：

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

【问题讨论】：

不知道，我用所见即所得的编辑器写的。我写它是为了给人们一个我想要完成的例子。
当你的意思是创建，你的意思是附加到DOM？
添加了一个jsfiddle链接来演示如何使用live
stackoverflow.com/questions/9666914/… 为这个问题提供了一个非常好的解决方案。
使用arrive.js库。

标签： javascript jquery loaded

【解决方案1】：

你是如何创建元素的？

如果您在静态 HTML 中创建它，那么只需使用 .ready(handler) 或 .on("load", handler)。如果您使用的是 AJAX，那又是一锅鱼。

如果您使用的是 jQuery 的 load() 函数，那么当内容加载时，您可以运行一个回调：

$('#element').load('sompage.html', function(){ /* callback */ });

如果您使用 jQuery 的 $.ajax 或 $.get/$.post 函数，那么会有一个成功回调：

$.ajax({
  url: 'somepage.html',
  success: function(){
    //callback
  }
});

如果您只是创建元素并像这样附加它：

$('body').append('<div></div>');

那么你可以这样做：

$('<div />', { id: 'mydiv' }).appendTo('body').ready(function(){ /* callback */ });

但这没关系 - 因为它是同步的（这意味着下一行代码在将元素添加到 DOM 之前不会运行...... - 除非你正在加载图像等）所以你可以这样做：

$('<div />', { id: 'mydiv' }).appendTo('body');
$('#mydiv').css({backgroundColor:'red'});

但实际上，说你可以这样做：

$('<div />', {id:'mydiv'}).appendTo('body').css({backgroundColor:'red'});

【讨论】：

哈哈 :) 它也是你给出的例子！ :p 很高兴你成功了
我花了很长时间才找到这个答案，但它工作得很好并且很容易实现。谢谢！

【解决方案2】：

您可能想查看 jQuery live 事件。您将事件处理程序附加到现在匹配或在 DOM 中创建其他元素之后匹配的选择器。

因此，如果您有一个 <ul> 并且您动态创建新的 <li> 项目，则在您的 $(document).ready() 中，您可以将选择器连接到事件处理程序，以便您的所有 <li> 元素将为此连接事件。

这是一个演示 live 的 jsFiddle 示例。

希望这会有所帮助。

【讨论】：

我不明白它不包含拆分是什么意思？如果我不理解，我很抱歉。
太好了...我用正常语法声明了很多函数，有没有其他方法可以将它们更改为实时？

【解决方案3】：

创建一个元素没有多大意义，除非它被插入到页面中。我想这就是ready 函数的意思。

onLoad 事件仅限于某些元素，不支持div 或p 元素。您必须选择：

您可以使用setInterval 函数来检查元素是否存在。找到元素后，您可以清除区间：

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

第二种也是更惯用的方法是在目标元素上添加一个变异观察者，并在目标发生变异时检查该元素是否是插入元素之一，即添加新元素：

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

还有另外两种选择，为DOMNodeInserted 或DOMNodeInsertedIntoDocument 事件添加事件侦听器，但由于MutationEvent 已弃用，因此最好避免使用它们。

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

【讨论】：

【解决方案4】：

有时这对于在您自己的脚本之外创建/加载的 DOM 元素是必需的，无论是由不同的 js 库还是您直接控制之外的事件。

对于这种情况，我总是设置一个间隔，它会定期检查目标元素是否存在，如果是，则间隔会自行删除并运行回调函数。

为此，我有一个可重复使用的预定义函数：

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
    });

【讨论】：

【解决方案5】：

你可以试试这个代码

$('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>

【讨论】：

【解决方案6】：

在创建元素后最好检查 .live()，

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

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

【讨论】：

【解决方案7】：

$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

   console.log("I have been created!");

});

【讨论】：

【解决方案8】：

旧线程，但在我的情况下，我遇到了一个带有大附加树的情况，我想可以说做一些内联初始化，并执行了以下操作：

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

【讨论】：

【解决方案9】：

最直接的就是在创建元素后直接调用回调:)

【讨论】：