.append 후 jQuery 함수

.append 후 jQuery 함수

---

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

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

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

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

---

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

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

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

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

---

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

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

padding-left 속성은 Firefox에서 올바르게 검색되지만 Chrome에서는 비어 있습니다. 내가 생각하는 다른 모든 CSS 속성과 마찬가지로. 몇 가지 실험 후 나는 CSS 'getter'를 setTimeout()10ms 지연 으로 래핑하는 데 안주해야 했는데 이것은 지옥처럼 추악하지만 Chrome에서 작동하는 유일한 것입니다. 이 문제를 더 잘 해결하는 방법을 알고 계신 분이 있다면 매우 감사하겠습니다.

---

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

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

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

---

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

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

---

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

---

나는 같은 문제를 만났고 간단한 해결책을 찾았습니다. 추가 기능을 호출 한 후 문서를 준비합니다.

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

---

나는 이것이 잘 대답했다고 생각하지만 이것은 "subChild_with_SIZE"를 처리하는 데 좀 더 구체적입니다 (부모로부터 온 것이지만 그것이있을 수있는 곳에서 그것을 조정할 수 있다면)

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

---

여기에있는 모든 답변에 놀랐습니다 ...

이 시도:

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

0 시간 초과에 유의하십시오. 임의의 숫자가 아닙니다 ... 제가 이해하는 바와 같이 (내 이해가 약간 흔들릴 수 있지만) 두 개의 자바 스크립트 이벤트 큐가 있습니다. 하나는 매크로 이벤트 용이고 다른 하나는 마이크로 이벤트 용입니다. "더 큰"범위의 대기열에는 UI (및 DOM)를 업데이트하는 작업이 보관되고 마이크로 대기열은 빠른 작업 유형 작업을 수행합니다.

또한 시간 제한을 설정한다고해서 코드가 지정된 값에서 정확히 수행되는 것은 아닙니다. 이것이하는 일은 본질적으로 함수를 더 높은 큐 (UI / DOM을 처리하는 큐)에 넣고 지정된 시간 전에 실행하지 않는 것입니다.

This means that setting a timeout of 0 puts it into the UI/DOM-portion of javascript's event queue, to be run at the next possible chance.

This means that the DOM gets updated with all previous queue items (such as inserted via $.append(...);, and when your code runs, the DOM is fully available.

(p.s. - I learned this from Secrects of the JavaScript Ninja - an excellent book: https://www.manning.com/books/secrets-of-the-javascript-ninja )

---

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

---

the Jquery append function returns a jQuery object so you can just tag a method on the end

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

---

For images and other sources you can use that:

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

---

Cleanest way is to do it step by step. Use an each funciton to itterate through each element. As soon as that element is appended, pass it to a subsequent function to process that element.

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

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

---

I encountered this issue while coding HTML5 for mobile devices. Some browser/device combinations caused errors because .append() method did not reflect the changes in the DOM immediatly (causing the JS to fail).

By quick-and-dirty solution for this situation was:

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

---

Yes you can add a callback function to any DOM insertion:
$myDiv.append( function(index_myDiv, HTML_myDiv){ //.... return child })

Check on JQuery documentation: http://api.jquery.com/append/
And here's a practical, similar, example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend_func

---

I ran into a similar problem recently. The solution for me was to re-create the colletion. Let me try to demonstrate:

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

Hope this helps!

---

In jquery you could use just after your append

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

$() calls a function that either registers a DOM-ready callback (if a function is passed to it) or returns elements from the DOM (if a selector string or element is passed to it)

You can find more here
difference between $ and $() in jQuery
http://api.jquery.com/ready/

---

I know it's not the best solution, but the best practice:

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

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

---

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

Append doesn't have callbacks, and this is code that executes synchronously - there is no risk of it NOT being done

---

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

참고URL : https://stackoverflow.com/questions/6068955/jquery-function-after-append