jQuery를 사용하여 DOM에 입력을 추가 할 때 함수 호출

Question

jquery를 사용하여 DOM에 입력을 추가하고 제거하는 페이지가 있습니다. 그들 중 일부는 클래스 ("숫자")를 공유합니다. 각 입력이 추가되면 코드에서 "숫자"클래스가있는 모든 새 입력에 .numeric()을 호출해야합니다. 이 블록을 코드 시작 부분에 정의했습니다.

$('input.numeric') 
    .live('load', function() { 
     $(this).numeric(); 
    }); 

로드가 추가 된 노드와 관련이없는 것 같습니다. 준비 이벤트가 작동하지 않습니다.

어떻게하면됩니까? 감사의 동료

편집 : 나는 다음과 같은 @BGerrissen 방법을보다 일반적인 방법으로 해결할 수있었습니다. 이미 추가를위한 래퍼 (draw)를 정의하고, 추가 할 때마다 $(document).trigger('appended')을 트리거하므로 어디서나 쉽게 추적 할 수 있습니다. 그럼 내가 사용한다

$(document) 
    .bind('appended', function() { 
     $('input.numeric').numeric(); 
    }); 

내가 원하는 것을 할 수있다. 건배

Answer 1

입력을 추가 할 때 맞춤 이벤트도 발생시킵니다.

var child = $("<input class='numeric' />"); 
$("#parent").append(child); 
child.trigger("appended"); 

그럼 당신은 당신의 목적으로 이벤트를 연결할 수 있습니다 :

$('input.numeric') 
    .live('appended', function() { // Use .on() method from jQuery 1.7 and up 
     $(this).numeric(); 
    }); 

참고 :를 jQuery를 1.7로,() .live이되지 않습니다. .on()을 사용하십시오.

또는 추가시 이벤트를 시작하는 데 도우미 메서드를 사용하십시오.

function appendAndFireAppendEvent(parentExpr , childExpr){ 
    var child = $(childExpr); 
    $(parentExpr ).append(child); 
    child.trigger("appended"); 
} 

// usage 
appendAndFireAppendEvent("#parentElement" , "<input class='numeric' />"); 

는 통보하지 **

또한 항상 "추가"이벤트가 발생하는 jQuery의 APPEND() 메소드를 오버라이드 (override) 할 수 있습니다.

var oldAppend = $.fn.append; 
$.fn.append = function(el) 
{ 
    oldAppend.call(this , el); // DONT convert el to a JQuery object before passing it to oldAppend 
    $(el).trigger("appended"); 
    return $(el); // to allow chaining to work 
} 

그러나이 모든 추가하려면 적용됩니다()는 당신이 그것을 원하거나하지 내가이 재정의 안정성을 조사하지했듯이 아마도 뭔가를 깰 수 어떠했는지를 호출합니다.

Answer 2

사용자 지정 이벤트를 사용하여 BGerrissen에 동의합니다. 귀하의 질문에 대해서는

: 방금 ​​입력보다는 HTML을 더 전체 HTML은 아래와 같이 니펫을 스캔 할 수있는 추가하는 경우 : 당신의 대답에 대한

var html = ''; 
html += '<div>'; 
html += '<input class="numeric" />'; 
html += '</div>'; 

var $html_to_add = $(html); 

// add html to dom 

if ($html_to_add.find('input.numeric').length > 0) { 
    // trigger event 
}