ฟังก์ชั่น jQuery หลัง. append

วิธีเรียกใช้ฟังก์ชันหลังจาก jQuery .appendเสร็จสมบูรณ์แล้ว?

นี่คือตัวอย่าง:

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

ปัญหา: เมื่อต่อท้ายโครงสร้าง DOM ที่ซับซ้อนการคำนวณขนาดใหม่ขององค์ประกอบรูทภายในการเรียกกลับของฟังก์ชันต่อท้ายจะไม่ถูกต้อง สมมติฐานคือ DOM ในยังโหลดไม่สมบูรณ์มีเพียงลูกแรกของ DOM ที่ซับซ้อนที่เพิ่มเข้ามาเท่านั้น

คุณมีคำตอบที่ถูกต้องมากมายในที่นี้ แต่ไม่มีคำตอบใดที่บอกคุณได้ว่าทำไมมันถึงใช้งานได้จริง

ในคำสั่ง JavaScript จะดำเนินการทีละคำสั่งพร้อมกันตามลำดับที่มาเว้นแต่คุณจะบอกอย่างชัดเจนว่าเป็นแบบอะซิงโครนัสโดยใช้การหมดเวลาหรือช่วงเวลา

ซึ่งหมายความว่า.appendเมธอดของคุณจะถูกดำเนินการและไม่มีสิ่งอื่นใด (โดยไม่คำนึงถึงการหมดเวลาหรือช่วงเวลาที่อาจมีอยู่) จะดำเนินการจนกว่าเมธอดนั้นจะเสร็จสิ้น

สรุปได้ว่าไม่จำเป็นต้องโทรกลับเนื่องจาก.appendจะทำงานพร้อมกัน

แม้ว่า Marcus Ekwall จะถูกต้องเกี่ยวกับความซิงโครไนซ์ของการผนวก แต่ฉันก็พบว่าในสถานการณ์แปลก ๆ บางครั้ง DOM ไม่ได้แสดงผลโดยเบราว์เซอร์อย่างสมบูรณ์เมื่อโค้ดบรรทัดถัดไปทำงาน

ในสถานการณ์นี้โซลูชัน shadowdiver จะเป็นไปตามบรรทัดที่ถูกต้อง - เมื่อใช้. พร้อม - อย่างไรก็ตามการเชื่อมโยงการเรียกไปยังภาคผนวกดั้งเดิมของคุณจะเป็นระเบียบมากขึ้น

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

ฉันมีปัญหาเดียวกันกับการคำนวณขนาดใหม่และหลังจากปวดหัวมาหลายชั่วโมงฉันต้องไม่เห็นด้วยกับการ.append()ทำงานแบบซิงโครนัสอย่างเคร่งครัด อย่างน้อยก็ใน Google Chrome ดูรหัสต่อไปนี้

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

คุณสมบัติ padding-left ถูกดึงมาอย่างถูกต้องใน Firefox แต่ว่างเปล่าใน Chrome เช่นเดียวกับคุณสมบัติ CSS อื่น ๆ ที่ฉันคิด หลังจากการทดลองบางครั้งฉันต้องตัดสินใจเพื่อตัด CSS 'getter' setTimeout()ด้วยความล่าช้า 10 ms ซึ่งฉันรู้ว่าน่าเกลียดเหมือนนรก แต่มีเพียงอันเดียวที่ทำงานใน Chrome หากคุณมีความคิดที่จะแก้ไขปัญหานี้ด้วยวิธีที่ดีกว่านี้ฉันจะขอบคุณมาก

ฉันประหลาดใจกับคำตอบทั้งหมดที่นี่ ...

ลองสิ่งนี้:

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

หมายเหตุการหมดเวลา 0 ไม่ใช่ตัวเลขตามอำเภอใจ ... อย่างที่ฉันเข้าใจ (แม้ว่าความเข้าใจของฉันอาจจะสั่นคลอนเล็กน้อย) มีคิวเหตุการณ์จาวาสคริปต์สองคิว - คิวหนึ่งสำหรับเหตุการณ์มาโครและอีกหนึ่งสำหรับเหตุการณ์ขนาดเล็ก คิวที่มีขอบเขต "ใหญ่กว่า" เก็บงานที่อัปเดต UI (และ DOM) ในขณะที่คิวขนาดเล็กดำเนินการประเภทงานด่วน

โปรดทราบด้วยว่าการตั้งค่าการหมดเวลาไม่ได้รับประกันว่าโค้ดจะทำงานตรงตามค่าที่ระบุ สิ่งนี้ทำให้ฟังก์ชันอยู่ในคิวที่สูงขึ้นเป็นหลัก (ฟังก์ชันที่จัดการ UI / DOM) และไม่เรียกใช้ก่อนเวลาที่กำหนด

ซึ่งหมายความว่าการตั้งค่าการหมดเวลาเป็น 0 จะทำให้มันอยู่ในส่วน UI / DOM ของคิวเหตุการณ์ของจาวาสคริปต์เพื่อให้รันในโอกาสถัดไปที่เป็นไปได้

ซึ่งหมายความว่า DOM ได้รับการอัปเดตด้วยรายการคิวก่อนหน้าทั้งหมด (เช่นแทรกผ่าน$.append(...);และเมื่อโค้ดของคุณทำงาน DOM จะพร้อมใช้งานอย่างสมบูรณ์

(ps - ฉันเรียนรู้สิ่งนี้จากSecrects of the JavaScript Ninja - หนังสือที่ยอดเยี่ยม: https://www.manning.com/books/secrets-of-the-javascript-ninja )

ฉันมีตัวแปรอื่นที่อาจเป็นประโยชน์สำหรับใครบางคน:

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

ฉันเจอปัญหาเดียวกันและพบวิธีง่ายๆ เพิ่มหลังจากเรียกใช้ฟังก์ชันผนวกเอกสารพร้อม

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

การใช้MutationObserverสามารถทำหน้าที่เหมือนการโทรกลับสำหรับappendเมธอดjQuery :

ฉันได้อธิบายไว้ในคำถามอื่นและคราวนี้ฉันจะยกตัวอย่างสำหรับเบราว์เซอร์ที่ทันสมัยเท่านั้น:

// 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>');

ฉันคิดว่านี่เป็นคำตอบที่ดี แต่นี่เป็นวิธีที่เฉพาะเจาะจงมากขึ้นในการจัดการ "subChild_with_SIZE" (หากมาจากพาเรนต์ แต่คุณสามารถปรับเปลี่ยนจากที่ที่อาจเป็นได้)

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

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

ฟังก์ชันผนวก Jquery ส่งคืนวัตถุ jQuery เพื่อให้คุณสามารถแท็กเมธอดในตอนท้าย

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

สำหรับรูปภาพและแหล่งที่มาอื่น ๆ คุณสามารถใช้ได้:

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

วิธีที่สะอาดที่สุดคือทำทีละขั้นตอน ใช้ funciton แต่ละรายการเพื่อถ่ายทอดผ่านแต่ละองค์ประกอบ ทันทีที่ต่อท้ายองค์ประกอบนั้นให้ส่งต่อไปยังฟังก์ชันที่ตามมาเพื่อประมวลผลองค์ประกอบนั้น

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

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

ฉันพบปัญหานี้ขณะเขียนโค้ด HTML5 สำหรับอุปกรณ์เคลื่อนที่ การผสมผสานเบราว์เซอร์ / อุปกรณ์บางอย่างทำให้เกิดข้อผิดพลาดเนื่องจากเมธอด. append () ไม่ได้แสดงถึงการเปลี่ยนแปลงใน DOM ในทันที (ทำให้ JS ล้มเหลว)

วิธีแก้ปัญหาที่รวดเร็วและสกปรกสำหรับสถานการณ์นี้คือ:

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>');

ใช่คุณสามารถเพิ่มฟังก์ชันการโทรกลับไปยังการแทรก DOM ใดก็ได้:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

ตรวจสอบเอกสาร JQuery: http://api.jquery.com/append/
และนี่คือตัวอย่างที่ใช้ได้จริงและคล้ายกัน: http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func

ฉันพบปัญหาที่คล้ายกันเมื่อเร็ว ๆ นี้ ทางออกสำหรับฉันคือสร้าง colletion ขึ้นมาใหม่ ให้ฉันลองสาธิต:

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();

หวังว่านี่จะช่วยได้!

ใน jquery คุณสามารถใช้หลังจากผนวก

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

$ () เรียกใช้ฟังก์ชันที่ลงทะเบียนการเรียกกลับที่พร้อมใช้งาน DOM (ถ้าฟังก์ชันถูกส่งผ่านไปยังฟังก์ชันนั้น) หรือส่งคืนองค์ประกอบจาก DOM (หากมีการส่งสตริงตัวเลือกหรือองค์ประกอบไปให้)

คุณสามารถค้นหาความ
แตกต่างระหว่าง $ และ $ () เพิ่มเติมได้ที่นี่ใน jQuery
http://api.jquery.com/ready/

ฉันรู้ว่ามันไม่ใช่ทางออกที่ดีที่สุด แต่เป็นแนวทางปฏิบัติที่ดีที่สุด:

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

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

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

Append ไม่มีการเรียกกลับและนี่คือรหัสที่ดำเนินการพร้อมกัน - ไม่มีความเสี่ยงที่จะไม่ทำ

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