동적으로 생성 된 요소에 대해 .each를 호출하는 올바른 방법은 무엇입니까?

Question

여기에 대답 https://stackoverflow.com/a/1207393/1786228와 지금은 아주 오래된 jQuery 플러그인 (http://www.erichynds.com/jquery/jquery-create-event/)

새로운 요소를 만들 때 잡을 수 on에 대한 올바른 이벤트가 무엇에 이어? 예를 들어, 내가 typeahead/autocomplete를 설치 한 입력 상자가 있습니다. 나는 다음과 같이한다 :

$(.input_box).each(function() { 
    // set stuff here 
    // setup options etc 
    // apply autocomplete plugin to element (this is a jQuery plugin) 
    var ac = $(this).autocomplete(acOptions); 
}); 

나는 폼에 더 많은 입력 상자를 추가하는 버튼이있다. 새 입력란에 대해서만 .each 함수를 호출하려면 어떻게해야합니까? $(.input_box).each...을 다시 사용하면 원래 상자에 플러그인이 두 번 추가됩니다.

기본적으로 아래 작업을 수행하고 싶지만 바인딩 할 "작성"이벤트가 없습니다.

$(document).on("create", "input_box", function(e) { 
    // set stuff here 
    // setup options etc 
    // apply autocomplete plugin to element (this is a jQuery plugin) 
    var ac = $(this).autocomplete(acOptions); 
}); 

이러한 이벤트가 있습니까? 그렇지 않다면 이것을 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

위에서 언급 한 것처럼 : 당신은 돌연변이 이벤트를 사용할 수 있습니다. 그러나 이러한 이벤트에는 몇 가지 제한 사항이 있습니다. 버전 9 이전의 IE는 지원되지 않으며 이러한 이벤트에 대한 성능 문제도 있습니다. 귀하의 경우에는 DOMNodeInserted을 들어야합니다. 가능한 예 : 별도의 기능에 초기화 로직을 넣고 DOM을 조작 한 후이 기능을 매번 전화 :

document.addEventListener("DOMNodeInserted", function(event){ 
    var target = event.srcElement || event.target; 
    if (target && target.tagName.toLowerCase() == 'input') { 
     // do what you want to do here.... 
    } 
}); 

내가 귀하의 경우 선호 무슨 일이 조금 더 간단입니다. 개인적으로

function init() { 
    $('.input_box').not('.initialized').each(function() { 
     var ac = $(this).addClass('initialized').autocomplete(acOptions); 
    }); 
}