jquery.on() 이벤트 핸들러는 동적으로 $ 요소

Question

내 문제를 설명하기 위해 추가, 내가 경고 기능은 패널 슬라이드 후 해고하지 않는 이유는 jsfiddle 페이지 here

http://jsfiddle.net/7HZvS/

을 만들어에 발사하지? "swiperee"라고 표시된 회색 상자를 클릭하고 회색 패널 슬라이드를 시청하십시오. 그런 다음 "swiperee2"라고 표시된 것을 클릭하십시오. 아무것도. 경고가 발생해야합니다. :

"swiperee"회색 버튼을 클릭하면 첫 번째 패널이 슬라이드되기 때문에 두 번째 회색 버튼 "swiperee2"가 .on() 이벤트를 처리하지 않는 이유는 없습니다.

감사

는

편집 :...는 아래 게이브의 대답은 정확히 바로 이럴 첫째, 자신의 코드 CSTE 연구진() 이벤트 목록을하지 이벤트 맵을 사용하지만 그냥 문법 것은 자신의 포인트는 그되어 있지 않으며 동적으로 요소를 추가 중이므로 은 위임 된이어야합니다.

실제로 실제로 모든 요소가로드되어 있기 때문에 실제로는 올바른 생각인지 확신 할 수 없습니다. 단지 표시되지 않습니다. 여기에는 아약스가 없습니다. 모든 일은 요소가 DOM 계층 구조를 이동한다는 것입니다.

아래 요청 된대로 jsFiddle의 샘플 코드입니다.

$(function(){ 
    var g = { 
     func : { 
      swipeLeft : function($el) 
      { 
       $RIGHT = $('<div id="right">') 
        .appendTo('body') 
        .addClass('scrollable hwaccel') 
        .css({ 
         'position' : 'absolute', 
         'z-index' : '2', 
         'top'  : '0px', 
         'left'  : '640px', 
         'width'  : '640px', 
         'height' : '960px', 
         'border' : '1px solid #ccf' 
        }) 
       ; 
       $el.appendTo($RIGHT); 
       $('#right, #main').animate(
        { 
         left : '-=640px' 
        }, 
        500, 
        function(){ 
         $MAIN.empty(); 
         $el.appendTo($MAIN); 
         $MAIN.css('left','0px'); 
         $RIGHT.remove(); 
        } 
       ); 
      } 
     } 
    }; 

    $MAIN = $('<div id="main">') 
     .appendTo('body') 
     .addClass('scrollable hwaccel') 
     .css({ 
      'position' : 'absolute', 
      'z-index' : '1', 
      'top'  : '0px', 
      'left'  : '0px', 
      'width'  : '640px', 
      'height' : '960px', 
      'border' : '1px solid #009' 
     }) 
    ; 
    $start = $('<div id="start">') 
     .appendTo($MAIN) 
     .css({ 
      'position' : 'absolute', 
      'top'  : '0px', 
      'left'  : '0px', 
      'width'  : '640px', 
      'border' : '1px solid #900' 
     }) 
     .html(
      'hello<br/>456' 
     ) 
     .append(
      $('<div id="swiperee">') 
      .css({ 
       'position' : 'absolute', 
       'top'  : '10px', 
       'left'  : '10px', 
       'width'  : '100px', 
       'height' : '40px', 
       'background': '#ccc', 
       'cursor' : 'pointer' 
      }) 
      .html('swiperee') 
      .on({ 
       click : function(){ 
        g.func.swipeLeft($next); 
       } 
      }) 
     ) 
    ; 
    $next = $('<div id="next">') 
     .css({ 
      'position' : 'absolute', 
      'top'  : '0px', 
      'left'  : '0px', 
      'width'  : '640px', 
      'height' : '960px', 
      'background': '#ddd' 
     }) 
     .html(
      'sdfjkgh sdklfjgh sdklfjgh skldfj ghskldjgh' 
     ) 
     .append(
      $('<div id="swiperee2">') 
      .css({ 
       'position' : 'absolute', 
       'top'  : '10px', 
       'left'  : '10px', 
       'width'  : '100px', 
       'height' : '40px', 
       'background': '#ccc', 
       'cursor' : 'pointer' 
      }) 
      .html('swiperee2') 
      .on({ 
       click : function(){ 
        alert('sdf');// WHY DOES NOT CALL?? 
       } 
      }) 
     ) 
    ; 
}); 

Answer 1

문제는 애니메이션 콜백 라인 $MAIN.empty()이다. 그것을 제거하면 작동합니다.

호출은 분명히 이벤트 처리기를 바인딩 해제하는 일부 정리를 수행합니다.