![](/img/trans.png)
[英]How can I set the wrapper of an element's height after the element has been created?
[英]How can I call a function after an element has been created in jquery?
我想在创建元素后调用一个函数。 有没有办法做到这一点?
例子:
$("#myElement").ready(function() {
// call the function after the element has been loaded here
console.log("I have been loaded!");
});
你是如何创建元素的?
如果您在静态 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'});
有时,对于在您自己的脚本之外创建/加载的 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
});
您可以使用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
你可以试试这个代码
$('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>
在创建元素后检查 .live() 最好的,,
$('.clickme').live('click', function() {
// Live handler called.
});
然后再添加一个新元素:
$('body').append('<div class="clickme">Another target</div>');
旧线程,但在我的情况下,我遇到了一个大附加树的情况,我想在线进行一些初始化,并执行以下操作:
$("<div>").append(
...
$("<div>").foo(...).bar(...).etc(...).each(function(){
// init code to run after chain of init functions called
})
...
)
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){
console.log("I have been created!");
});
最直接的就是在创建元素后直接调用回调:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.