使用jQuery將表中的行從一個表移動到另一個表

Question

我試圖將一行從一個表移動到另一個表中，然後再返回。

我有這個工作去第一個表，但回去的事件沒有發射。這裏是我的代碼

HTML

<table id="table_source"> 
    <tbody> 
     <tr> 
      <td>Row</td> 
      <td>1</td> 
      <td><img src='move_image_path' alt='Move' class='move-row' /></td> 
     </tr> 
     <tr> 
      <td>Another Row</td> 
      <td>2</td> 
      <td><img src='move_image_path' alt='Move' class='move-row' /></td> 
     </tr> 
    </tbody> 
</table> 
    <table id="table_dest" class="active"><a href="#">People</a> 
     <tbody> 
      <tr> 
      </tr> 
     </tbody> 
    </table> 

jQuery的

$("#table_source img.move-row").click(function (e) {    
      var tr = $(this).closest("tr").remove().clone(); 
      tr.find("img.move-row") 
     .attr("src", "remove_image_path.jpg") 
     .attr("alt", "Remove"); 
      $("#table_dest tbody").append(tr); 
     }); 

     $("#table_dest img.move-row").click(function (e) { 
      alert("hi") //THIS IS NOT FIRING 
      var tr = $(this).closest("tr").remove().clone(); 
      tr.find("img.move-row") 
     .attr("src", "move_image_path.jpg") 
     .attr("alt", "Move"); 
      $("#table_source tbody").append(tr); 
     }); 

Answer 1

您必須使用jQuery的on回調。

$("#table_dest").on('click', 'img.move-row', function (e) { 
    alert("hi") //THIS IS NOT FIRING 
    var tr = $(this).closest("tr").remove().clone(); 
    tr.find("img.move-row") 
     .attr("src", "move_image_path.jpg") 
     .attr("alt", "Move"); 
    $("#table_source tbody").append(tr); 
}); 

最初，當頁面加載的點擊事件綁定到現有的圖像。那些被添加的東西沒有附加到他們的事件。通過使用on()，您不再有這個問題。