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

Question

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

例:

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

Answer 1

你是如何创建元素的？

如果您在静态HTML中创建它,那么只需使用.ready(handler)或.on("load", handler).如果你正在使用AJAX,那就是另一条鱼.

如果您正在使用jQuery的load()函数,那么可以在加载内容时运行回调:

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

如果你正在使用jQuery $.ajax或$.get/ $.postfunctions,那么就有一个成功的回调:

$.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'});

Answer 2

您可能想要查看jQuery 实时事件.您将事件处理程序附加到选择器,该选择器现在匹配,或者在DOM中创建其他元素之后.

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

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

希望这可以帮助.

Answer 3

有时，在您自己的脚本之外创建/加载的 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
    });

Answer 4

创建一个元素没有多大意义，除非它被插入到页面中。我想这就是你所说的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

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

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

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

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

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