[英]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!");
});
最直接的就是在創建元素后直接調用回調:)
創建元素后如何設置元素高度的包裝？
[英]How can I set the wrapper of an element's height after the element has been created?
在使用 JS/jQuery 應用“傾斜”變換后，如何獲取元素的高度/偏移量？
[英]How can I get the height/offset of an element after it has 'skew' transform has been applied with JS/jQuery?
在jQuery中如何發送一個ajax請求后調用一個函數？
[英]in jquery how to call a function after an ajax request has been sent?
將元素插入DOM后，如何對元素執行jQuery函數？
[英]How do I perform a jQuery function on an element after it has been inserted into the DOM?
完全加載jQuery元素后，如何執行click事件？
[英]How can I execute a click event after a jQuery element has been completely loaded?
jQuery：如何通過DOM准備好后在jQuery中創建的id獲取元素？
[英]jQuery : How to get an element by id which has been created in jQuery after DOM ready?
jQuery對話框窗口加載后，如何更改按鈕或可用按鈕的功能？
[英]How can I change the buttons OR function of available buttons on a jQuery dialog window after it has been loaded?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.