jquery.on（）事件處理程序不開火動態添加$元素

Question

爲了說明我的問題，我創建了一個頁面的jsfiddle here

http://jsfiddle.net/7HZvS/

爲什麼報警功能得不到面板幻燈片後解僱了嗎？點擊標有「swiperee」的灰色方框，然後看一個灰色面板，然後點擊標有「swiperee2」的標籤。沒有。應該引起警報。 :(

由於第一個面板在您點擊「swiperee」灰色按鈕時滑動，我沒有看到爲什麼第二個灰色按鈕「swiperee2」無法處理它的.on（）事件 - 它生成的相同。

感謝

編輯：。 以下Gabe的答案是不完全正確的恕我直言，首先，他的代碼使用。對（）事件列表不是事件映射，但是這只是語法他的觀點是，事件應該是委託，因爲我在動態添加元素。

我實際上並不確定這是否是正確的想法，因爲我已經加載了所有的元素，它們只是不顯示 - 這裏沒有ajax。發生的一切就是元素圍繞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()。刪除它，它的作品。

的.empty()通話顯然做了一些清理的地方解除綁定的事件處理程序。