jQuery - 將刪除按鈕附加到自動啓動腳本？

Question

修改後的代碼在最後

我很新的jQuery的，即使我喜歡它，有很多我還需要學習......下面的代碼將追加一個新行，如果用戶單擊一行中現有單元格中的一個單元格。這部分工作正常。我試圖弄清楚如何在每行的末尾還有一個[ - ]按鈕，用戶可以通過點擊來刪除該行，以防萬一他們犯了錯誤？這甚至有可能嗎？

這裏是jQuery的

$(function(){ 
     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        newInput.id="newId"; 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
      } 
     }); 
}); 

這裏的標記

<table width="100%" cellpadding="0" cellspacing="0" id="knotes"> 
<thead bgcolor="#f7f9c9"> 
    <td align="center"><label for="name">Name</label></td> 
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td> 
    <td>&nbsp;</td> 
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td> 

    <td>&nbsp;</td> 
    <td align="center"><label for="kbreak">Bk?</label></td> 
    <td>&nbsp;</td> 
    <td align="center"><label for="kshift">Shift</label></td> 
    <td>&nbsp;</td> 
</thead> 

<tr> 
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td> 

    <td align="center"><input type="text" name="klabor[kot][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kdt][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kbreak][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kshift][]" /></td> 

</tr> 
</table> 

下面是修改後的代碼 修訂後的jQuery

$(function(){ 
     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        newInput.id="newId"; 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
        $('minus').live(function(){$(this).closest('tr').remove();}); 
      } 
     }); 
}); 

修訂標記

<table width="100%" cellpadding="0" cellspacing="0" id="knotes"> 
<thead bgcolor="#f7f9c9"> 
    <td align="center"><label for="name">Name</label></td> 
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td> 
    <td>&nbsp;</td> 
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td> 

    <td>&nbsp;</td> 
    <td align="center"><label for="kbreak">Bk?</label></td> 
    <td>&nbsp;</td> 
    <td align="center"><label for="kshift">Shift</label></td> 
    <td>&nbsp;</td> 
</thead> 

<tr> 
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td> 

    <td align="center"><input type="text" name="klabor[kot][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kdt][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kbreak][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kshift][]" value="" /></td><td class="minus"><img src="/images/minus.png" /></td> 

</tr> 
</table> 

Answer 1

您可以使用jQuery的live方法。

$(".removeMe").live('click',function(){ 
    $(this).closest('tr').remove(); 
} 

現在，當過您添加或克隆的html代碼一樣<a class='removeMe'>(-) Remove</a> jQuery將爲其設置一個onclick事件。

編輯：

$(function(){ 

     $('.minus').live(function(){$(this).closest('tr').remove();}); 

     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
      } 
     }); 
}); 

Answer 2

是：

$('button').live(function(){$(this).closest('tr').remove();}); 

其中的 '按鈕' 是代表你的選擇[ - ]按鈕。

而且，可以進行一些改變來優化你的代碼（並使其更跨瀏覽器兼容）：

if(row.className.indexOf("clicked")==-1) 
row.className+="clicked"; 
newInput.id="newId"; 

應該變成：

if (row.hasClass('clicked')) 
row.addClass('clicked'); 
newInput.attr('id','newId');