jQuery - 새 요소에 기존 핸들러 사용

Question

일부 작업을 수행하기 위해 'onchange'핸들러가있는 입력이있는 테이블을 만들었습니다. 예를 들어, 그래서 : 나는 새 테이블 요소를으로 .Append 할 때

jQuery(<selector will find many elements>).keyup(function(){do something}) 

지금 문제가있는 것입니다. 그들은 keyup에 응답하지 않습니다 ... 기존의 .keyup (또는 다른 이벤트)에서 automagicaly 새로운 요소 (.clone을 사용하고 있습니다)를 바인딩하는 방법이 있습니까?

Answer 1

event delegation을 사용해야합니다. 이벤트 위임은 이벤트 "bubbles"이 DOM을 통해 이루어 지므로 많은 요소가 해당 하위 요소 중 하나의 이벤트에 대한 알림을 수신한다는 것을 의미합니다.

jQuery을 사용하면 이벤트 처리 및 이벤트 버블 링의 여러 브라우저 간 불일치가 원활 해 지므로이 방법이 훨씬 쉽습니다.

이제 테이블의 각 행에 이벤트 처리기를 바인딩한다고 가정 해 보겠습니다. 간단하지만 비효율적 인 방법은 이벤트 핸들러를 각 행에 바인딩하는 것입니다. 이것은 실제로 당신이 지금하고있는 일입니다. 대신 하나의 핸들러를 테이블에 바인딩하고 "안녕하세요, 내 행 중 하나에 문제가 발생할 때마다이 핸들러를 호출하십시오."이라고 가정 해보십시오. 이것이 이벤트 위임에 관한 것입니다. jQuery 1.7에서는 이벤트 처리를위한 인터페이스가 리팩터링되어보다 일관성있게 구현되었습니다. 다음은 이러한 핸들러 바인딩하는 방법의 예는 다음과 같습니다.

$('table.math').on(
    /* 
    * This first argument is a map (object) of events and their corresponding 
    * event handlers, like so: {eventName: eventHandler ([e]) {}) 
    */ 
    { 
    keyup: function doMath (e) { 
     // Your event handling code here. 
     // "this" refers to the input where the keyUp-event occured 
    } 
    }, 
    /* This argument is a selector, and reads: 
    * 'For table with class "math", bind to the events listed above 
    * whenever a corresponding event occurs on an input with class 
    * "mathInput" 
    */ 
    'input.mathInput' 
); 

이벤트 대표단의 또 다른 이점은 그것이 당신의 기준 "나는 새 테이블 요소를으로 .Append 할 문제가을 충족한다는 것입니다 그들은 돈 ' 키 응답에 응답하지 않습니다 ". 이벤트 위임을 사용하면 셀렉터와 일치하는 모든 자손, 즉 핸들러가 바인드 될 때 존재하는지 또는 나중에 동적으로 삽입되는지에 관계없이 셀렉터와 일치하는 모든 자손에 대해 자동으로 작동합니다.

는, 이벤트 위임을 요약하면 :

• 는 더 효율적입니다. 당신은