.append 뒤의 jQuery 함수

.append 뒤의 jQuery 함수

jQuery 후 함수 호출하는 방법.append다 끝났습니까?

예는 다음과 같습니다.

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

이슈:복잡한 DOM 구조를 추가하면 추가 함수 콜백 내의 루트 요소의 새 크기 계산이 잘못됩니다.DOM이 여전히 완전히 로드되지 않고 추가된 복합 DOM의 첫 번째 자식만 로드된다는 가정입니다.

여기에는 타당한 답이 많이 있지만, 그 중 어떤 것도 왜 그렇게 작동하는지에 대해 알려주지 않습니다.

자바스크립트 명령어는 타임아웃이나 인터벌을 사용하여 비동기화되도록 명시적으로 지시하지 않는 한 오는 순서대로 한 번에 하나씩 실행됩니다.

이 말은 당신의.append메서드가 실행되고 해당 메서드가 작업을 완료할 때까지 다른 어떤 것도 실행되지 않습니다(존재할 수 있는 시간 초과 또는 간격을 disregard).

요약하자면, 다음과 같은 이유로 콜백이 필요 없습니다..append동기적으로 실행됩니다.

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

이 시나리오에서 섀도 다이버 솔루션은 .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 지연으로, 내가 알기로는 아주 못생겼지만 유일하게 크롬에서 작동하는 것입니다.이 문제를 더 잘 해결할 수 있는 방법을 알고 계신 분이 있다면 정말 감사하겠습니다.

여기 있는 모든 답들이 놀랍네요...

시도해 보기:

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

0 타임아웃을 기록합니다.임의의 숫자가 아니라...제가 알기로는 (이해가 조금 흔들릴 수도 있지만) 매크로 이벤트용과 마이크로 이벤트용의 자바스크립트 이벤트 큐가 두 개 있습니다."큰" 범위의 대기열은 UI(및 DOM)를 업데이트하는 작업을 보유하고, 마이크로 대기열은 빠른 작업 유형 작업을 수행합니다.

또한 타임아웃을 설정한다고 해서 코드가 지정된 값으로 정확하게 수행되는 것은 아니라는 것을 깨달아야 합니다.이 작업은 기본적으로 상위 큐(UI/DOM을 처리하는 큐)에 함수를 넣고 지정된 시간 이전에는 함수를 실행하지 않는 것입니다.

이는 시간 초과를 0으로 설정하면 다음 기회에 실행되도록 javascript의 이벤트 큐의 UI/DOM-부분에 해당 시간을 입력함을 의미합니다.

이는 DOM이 이전의 모든 대기열 항목(예: 삽입 경로)으로 업데이트됨을 의미합니다.$.append(...);, 코드가 실행되면 DOM을 완전히 사용할 수 있습니다.

(p.s. - 자바스크립트 닌자의 시크렉츠에게 배운 책 - 훌륭한 책: https://www.manning.com/books/secrets-of-the-javascript-ninja )

같은 문제를 발견하고 간단한 해결책을 찾았습니다.append 함수를 문서 준비 완료라고 부른 후 추가합니다.

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

누군가에게 유용할 수 있는 또 다른 변형이 있습니다.

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

를 사용하면 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()
        })
    );
});

JQuery append 함수는 jQuery 객체를 반환하므로 메소드를 끝에 태그할 수 있습니다.

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

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

영상 및 기타 소스의 경우 다음을 사용할 수 있습니다.

$(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 삽입에 콜백 기능을 추가할 수 있습니다.
$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

저는 최근에 비슷한 문제에 부딪혔습니다.저에게 해결책은 콜렉션을 다시 만드는 것이었습니다.다음을 시연해 보겠습니다.

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

도움이 되길 바랍니다!

최선의 해결책이 아니라 최선의 방법이라는 것을 알고 있습니다.

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

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

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

Add에는 콜백이 없으며, 이 코드는 동기적으로 실행되는 코드입니다. 실행되지 않을 위험이 없습니다.

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

언급URL : https://stackoverflow.com/questions/6068955/jquery-function-after-append