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

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

例如：

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

---

您可能需要查看jQuery事件。将事件处理程序附加到选择器，该选择器可以立即匹配，也可以在DOM中创建其他元素后匹配

因此，如果您有一个

，并在

$（document）.ready（）

中动态创建新的

项，您可以将选择器连接到事件处理程序，以便将所有

元素连接到该事件

下面是一个演示

live

的示例

---

希望这有帮助。

最直接的方法是在创建元素后直接调用回调：）

您是如何创建元素的

如果您是在静态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>');

$（'body'）。追加（“”）；

然后您可以这样做：

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

$（“”，{id:'mydiv'}）.appendTo（'body'）.ready（函数（）{/*callback*/}）；

但这并不重要-因为它是同步的（这意味着下一行代码在将元素添加到DOM之前不会运行…-除非您正在加载图像等），所以您可以执行以下操作：

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

$（''，{id:'mydiv'}）.appendTo（'body'）；
$（'#mydiv'）.css（{backgroundColor:'red'}）；

但实际上，你可以这么做：

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

$（''，{id:'mydiv'}）.appendTo（'body'）.css（{backgroundColor:'red'}）；

签出.live（）在创建元素之后是最好的

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

然后再添加一个新元素：

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

$（'body'）。追加（'other target'）；

$（“”）。附加到（“#父项”）。每个（函数（）{
log（“我已经被创建了！”）；
});

您可以尝试此代码

$（'body'）。在（'click'，'btn'，function（）上{
$（$（''）.text（'NewDive'）.appendTo（'old'））.fadeOut（0.fadeIn（1000）；
})

#old>div{
宽度：100px；
背景：红色；
颜色：白色；
高度：20px；
字体：12px；
左侧填充：4px；
线高：20px；
保证金：3倍；
}

试验
创建Div

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

您可以使用函数检查元素是否存在。函数运行后，可以清除间隔：

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

---

旧线程，但在我的例子中，我遇到了一个大附加树的情况，可以说，我想在线进行一些初始化，并执行了以下操作：

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

$（“”）。追加(
...
$（“”）.foo（…）.bar（…）等（…）.每个（函数（）{
//在调用初始化函数链之后运行的初始化代码
})
...    
)

我不知道，我是在WYSIWYG编辑器中写的。我写这篇文章是为了给人们一个我想要完成的事情的例子。当你指的是创建时，你指的是附加到DOM中吗？添加了一个JSFIDLE链接来演示如何使用

live

发布了一个非常好的解决方案。使用库。我研究了live events，但当我尝试在没有“单击”、“鼠标悬停”的情况下实现live event时，或者任何其他侦听器，它给我一个错误，它不包含拆分。我不明白它不包含拆分是什么意思？如果我不理解，我很抱歉。很好。。。我用普通语法声明了很多函数，还有其他方法可以改变它们吗？哈哈：）这也是你给出的例子！：p很高兴你能成功。我花了很长时间才找到这个答案，但它很好用，而且很容易实现。谢谢

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