Hàm jQuery sau .append

Làm thế nào để gọi một hàm sau khi jQuery .appendhoàn tất?

Đây là một ví dụ:

$("#root").append(child, function(){
   // Action after append is completly done
});

Vấn đề: Khi một cấu trúc DOM phức tạp được thêm vào, việc tính toán kích thước mới của phần tử gốc trong lệnh gọi lại hàm append là sai. Các giả định là DOM trong vẫn chưa được tải hoàn toàn, chỉ có con đầu tiên của DOM phức tạp được thêm vào.

Bạn có nhiều câu trả lời hợp lệ ở đây nhưng không có câu trả lời nào thực sự cho bạn biết tại sao nó hoạt động như vậy.

Trong JavaScript, các lệnh được thực thi từng lần một, đồng bộ theo thứ tự mà chúng đến, trừ khi bạn nói rõ ràng chúng là không đồng bộ bằng cách sử dụng thời gian chờ hoặc khoảng thời gian.

Điều này có nghĩa là .appendphương thức của bạn sẽ được thực thi và không có gì khác (bất kể thời gian chờ hoặc khoảng thời gian tiềm ẩn nào có thể tồn tại) sẽ thực thi cho đến khi phương thức đó hoàn thành công việc của nó.

Tóm lại, không cần gọi lại vì .appendnó sẽ được chạy đồng bộ.

Tôi cũng gặp phải vấn đề tương tự với việc tính toán lại kích thước và sau nhiều giờ đau đầu, tôi phải không đồng ý với việc .append()cư xử đồng bộ nghiêm ngặt. Ít nhất là trong Google Chrome. Xem đoạn mã sau.

var input = $( '<input />' );
input.append( arbitraryElement );
input.css( 'padding-left' );

Thuộc tính padding-left được truy xuất chính xác trong Firefox nhưng nó trống trong Chrome. Giống như tất cả các thuộc tính CSS khác mà tôi cho là. Sau một số thử nghiệm, tôi đã phải giải quyết việc đưa CSS 'getter' vào setTimeout()với độ trễ 10 mili giây mà tôi biết là CỰC KỲ ÍT nhưng là cái duy nhất hoạt động trong Chrome. Nếu ai trong số các bạn có ý tưởng về cách giải quyết vấn đề này theo cách tốt hơn, tôi rất biết ơn.

Mặc dù Marcus Ekwall hoàn toàn đúng về tính đồng bộ của append, tôi cũng nhận thấy rằng trong những tình huống kỳ lạ, đôi khi DOM không được trình duyệt hiển thị hoàn toàn khi dòng mã tiếp theo chạy.

Trong trường hợp này, các giải pháp shadowdiver sẽ đi đúng hướng - với việc sử dụng .ready - tuy nhiên việc xâu chuỗi lệnh gọi đến phần phụ ban đầu của bạn sẽ gọn gàng hơn rất nhiều.

$('#root')
  .append(html)
  .ready(function () {
    // enter code here
  });

Tôi ngạc nhiên về tất cả các câu trả lời ở đây ...

Thử cái này:

window.setTimeout(function() { /* your stuff */ }, 0);

Lưu ý thời gian chờ 0. Đó không phải là một con số tùy ý ... như tôi hiểu (mặc dù sự hiểu biết của tôi có thể hơi sai), có hai hàng đợi sự kiện javascript - một cho các sự kiện vĩ mô và một cho các sự kiện vi mô. Hàng đợi có phạm vi "lớn hơn" chứa các tác vụ cập nhật giao diện người dùng (và DOM), trong khi hàng đợi vi mô thực hiện các thao tác loại tác vụ nhanh.

Cũng nhận ra rằng việc đặt thời gian chờ không đảm bảo rằng mã hoạt động chính xác ở giá trị được chỉ định đó. Những gì điều này làm về cơ bản là đặt hàm vào hàng đợi cao hơn (hàng xử lý UI / DOM) và không chạy nó trước thời gian đã chỉ định.

Điều này có nghĩa là việc đặt thời gian chờ bằng 0 sẽ đưa nó vào phần UI / DOM của hàng đợi sự kiện của javascript, để được chạy vào cơ hội có thể tiếp theo.

Điều này có nghĩa là DOM được cập nhật với tất cả các mục hàng đợi trước đó (chẳng hạn như được chèn qua $.append(...); và khi mã của bạn chạy, DOM hoàn toàn có sẵn.

(ps - Tôi học được điều này từ Secrects of the JavaScript Ninja - một cuốn sách tuyệt vời: https://www.manning.com/books/secrets-of-the-javascript-ninja )

Tôi có một biến thể khác có thể hữu ích cho ai đó:

$('<img src="http://example.com/someresource.jpg">').load(function() {
    $('#login').submit();
}).appendTo("body");

Tôi đã gặp cùng một vấn đề và đã tìm ra một giải pháp đơn giản. Thêm sau khi gọi hàm append, một tài liệu đã sẵn sàng.

$("#root").append(child);
$(document).ready(function () {
    // Action after append is completly done
});

Việc sử dụng MutationObservercó thể hoạt động giống như một cuộc gọi lại cho appendphương thức jQuery :

Tôi đã giải thích nó trong một câu hỏi khác và lần này tôi sẽ chỉ đưa ra ví dụ cho các trình duyệt hiện đại:

// Somewhere in your app:
var observeDOM = (() => {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback(mutations);
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });

            return obs;
        }
    }
})();

//////////////////
// Your code:

// setup the DOM observer (on the appended content's parent) before appending anything
observeDOM( document.body, ()=>{
    // something was added/removed
}).disconnect(); // don't listen to any more changes

// append something
$('body').append('<p>foo</p>');

Tôi nghĩ điều này đã được trả lời tốt nhưng điều này cụ thể hơn một chút để xử lý "subChild_with_SIZE" (nếu điều đó đến từ cấp độ gốc, nhưng bạn có thể điều chỉnh nó từ nơi nó có thể có)

$("#root").append(
    $('<div />',{
        'id': 'child'
    })
)
.children()
.last()
.each(function() {
    $(this).append(
        $('<div />',{
            'id': $(this).parent().width()
        })
    );
});

$.when($('#root').append(child)).then(anotherMethod());

hàm append của Jquery trả về một đối tượng jQuery để bạn có thể gắn thẻ một phương thức vào cuối

$("#root").append(child).anotherJqueryMethod();

Đối với hình ảnh và các nguồn khác, bạn có thể sử dụng:

$(el).one('load', function(){
    // completed
}).each(function() {
    if (this.complete)
        $(this).load();
});

Cách sạch nhất là làm từng bước một. Sử dụng mỗi chức năng để phân tích thông qua từng phần tử. Ngay sau khi phần tử đó được thêm vào, hãy chuyển phần tử đó cho một hàm tiếp theo để xử lý phần tử đó.

    function processAppended(el){
        //process appended element
    }

    var remove = '<a href="#">remove</a>' ;
    $('li').each(function(){
        $(this).append(remove);   
        processAppended(this);    
    });​

Tôi gặp sự cố này khi mã hóa HTML5 cho thiết bị di động. Một số kết hợp trình duyệt / thiết bị gây ra lỗi vì phương thức .append () không phản ánh các thay đổi trong DOM ngay lập tức (khiến JS bị lỗi).

Giải pháp nhanh chóng và bẩn thỉu cho tình huống này là:

var appint = setInterval(function(){
    if ( $('#foobar').length > 0 ) {
        //now you can be sure append is ready
        //$('#foobar').remove(); if elem is just for checking
        //clearInterval(appint)
    }
}, 100);
$(body).append('<div>...</div><div id="foobar"></div>');

Có, bạn có thể thêm một hàm gọi lại vào bất kỳ chèn DOM nào:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Kiểm tra tài liệu JQuery: http://api.jquery.com/append/
Và đây là một ví dụ thực tế, tương tự: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

Tôi đã gặp phải một vấn đề tương tự gần đây. Giải pháp cho tôi là tạo lại bộ sưu tập. Hãy để tôi cố gắng chứng minh:

var $element = $(selector);
$element.append(content);

// This Doesn't work, because $element still contains old structure:
$element.fooBar();    

// This should work: the collection is re-created with the new content:
$(selector).fooBar();

Hi vọng điêu nay co ich!

Trong jquery, bạn có thể sử dụng chỉ sau khi nối thêm

$(function(){
//code that needs to be executed when DOM is ready, after manipulation
});

$ () gọi một hàm đăng ký một lệnh gọi lại sẵn sàng cho DOM (nếu một hàm được chuyển cho nó) hoặc trả về các phần tử từ DOM (nếu một chuỗi bộ chọn hoặc phần tử được chuyển cho nó)

Bạn có thể tìm thêm tại đây
sự khác biệt giữa $ và $ () trong jQuery
http://api.jquery.com/ready/

Tôi biết đó không phải là giải pháp tốt nhất, nhưng là cách tốt nhất:

$("#root").append(child);

setTimeout(function(){
  // Action after append
},100);

$('#root').append(child);
// do your work here

Append không có lệnh gọi lại và đây là mã thực thi đồng bộ - không có nguy cơ nó KHÔNG được thực hiện

$('#root').append(child).anotherMethod();