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