.append 후 jQuery 함수

jQuery .append가 완전히 완료된 후 함수를 호출하는 방법 은 무엇입니까?

예를 들면 다음과 같습니다.

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

문제 : 복잡한 DOM 구조가 추가되면 추가 함수 콜백 내에서 루트 요소의 새 크기 계산이 잘못되었습니다. DOM은 아직 완전히로드되지 않았으며 추가 된 복잡한 DOM의 첫 번째 자식 만로드된다는 가정입니다.

여기에 유효한 답이 많이 있지만 그 중 어느 것도 실제로 작동하는 이유를 알려주지 않습니다.

JavaScript에서 명령은 시간 초과 또는 간격을 사용하여 명시 적으로 비 동기화하도록 지시하지 않는 한 순서대로 동기식으로 한 번에 하나씩 실행됩니다.

즉, .append메서드가 실행되고 해당 메서드가 작업을 완료 할 때까지 다른 어떤 것도 실행되지 않습니다 (존재할 수있는 잠재적 인 제한 시간 또는 간격에 관계없이).

요약하면 .append동 기적으로 실행 되므로 콜백이 필요하지 않습니다 .

Marcus Ekwall은 추가의 동시성에 대해 절대적으로 옳지 만, 이상한 상황에서 다음 코드 줄이 실행될 때 브라우저에서 DOM이 완전히 렌더링되지 않는 경우도 있음을 발견했습니다.

이 시나리오에서 shadowdiver 솔루션은 .ready를 사용하여 올바른 라인을 따르지만 호출을 원래 추가에 연결하는 것이 훨씬 깔끔합니다.

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

크기 재계 산과 똑같은 문제가 있으며 몇 시간 동안 두통을 겪은 후에는 .append()엄격하게 동기식 으로 행동하는 것에 동의하지 않습니다 . 적어도 구글 크롬에서는. 다음 코드를 참조하십시오.

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

padding-left 속성은 Firefox에서 올바르게 검색되지만 Chrome에서는 비어 있습니다. 내가 생각하는 다른 모든 CSS 속성과 마찬가지로. 몇 가지 실험 후 나는 CSS 'getter'를 setTimeout()10ms 지연 으로 래핑하는 데 안주해야 했지만 지옥처럼 추악하지만 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은 jQuery append메서드에 대한 콜백처럼 작동 할 수 있습니다 .

나는 다른 질문 에서 그것을 설명했고 , 이번에는 최신 브라우저에 대한 예만을 제공 할 것입니다.

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

가장 깨끗한 방법은 단계별로 수행하는 것입니다. 각 기능을 사용하여 각 요소를 터트립니다. 해당 요소가 추가되는 즉시 후속 함수에 전달하여 해당 요소를 처리합니다.

    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 삽입에 콜백 함수를 추가 할 수 있습니다. JQuery 문서에서 확인 : http://api.jquery.com/append/ 그리고 여기에 실용적인 유사한 예가 있습니다. http://www.w3schools.com/jquery/ tryit.asp? filename = tryjquery_html_prepend_func
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

최근 비슷한 문제가 발생했습니다. 나를위한 해결책은 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();