jquery添加/刪除html行

我有一個簡單的html表，我想要刪除和動態添加行。該html表有一個刪除圖標，通過點擊它一個jquery腳本刪除該行。爲表
代碼：jquery添加/刪除html行

<table id="table1"><tr><td> 
<img class="delete" alt="delete" src="delete_icon.png" /> 
</td></tr></table>

的鏈接添加一個新行：

<a href="#" name="addRow">Add Row</a>

HTML表格上面的代碼都jQuery的腳本：

<script type="text/javascript"> 
    /* delete row */ 
    $(document).ready(function() { 
     $('#table1 td img.delete').click(function() { 
      $(this).parent().parent().remove(); 
     }); 
    }); 

    /* add new row */ 
    $(document).ready(function() { 
     // Code between here will only run when the document is ready 
     $("a[name=addRow]").click(function() { 
      // Code between here will only run when the a link is clicked and has a name of addRow 
      $("table#table1 tr:last").after('<tr><td><img class="delete" alt="delete" src="@Url.Content("~/content/delete_icon.png")" /></td></tr>'); 
      return false; 
     }); 
    }); 

</script>

的問題如下：刪除和插入操作都起作用。但是，當我添加一個新行並嘗試刪除此行時，沒有任何反應。我只能刪除已經存在的行，jquery腳本不適用於新添加的行。

有什麼想法？

來源

2011-03-27 kmb

您需要使用live()

$('#table1 td img.delete').live('click', function(){ ... }); 
$("a[name=addRow]").live('click', function(){ ... });

來源

2011-03-27 20:25:22 mnelson

$('#table1 td img.delete').click(function() {

僅將點擊處理程序綁定到已存在的元素。您必須在添加它們時將此處理程序綁定到新添加的行，或通過.delegate或.live使用事件委派。

來源

2011-03-27 20:23:52 balpha

謝謝，這似乎是問題所在。我是jquery的新手，你能告訴我如何將點擊處理程序綁定到這個例子中的新元素？謝謝！ – kmb 2011-03-27 20:26:22

@kmb：如果您替換'.click（''by'.live（「click」，'它應該可以工作，但它不是最有效的解決方案，因爲它必須檢查每個點擊事件，不管它發生在哪裏;使用'.delegate'（請參閱我鏈接到的文檔），您可以限制它在表格內單擊。 – balpha 2011-03-27 20:28:39

這是因爲新添加的行沒有附加到刪除鏈接的click事件處理程序。您必須在創建新行時手動添加它，或使用live()，這會自動將事件附加到新創建的DOM節點。

來源

2011-03-27 20:24:14 ChrisR

新元素沒有得到附加的點擊處理程序。每次添加行時，您都可以重新附加它，方法是執行相同的代碼進行初始化，但是在點擊事件期間。

在這裏看到的jsfiddle：http://jsfiddle.net/

來源

2011-03-27 20:26:52

您需要使用jQuery live功能，可以讓你綁定事件尚未被引入到DOM元素。

$(document).ready(function() { 
    $('#table1 td .delete').live('click', function() { 
     $(this).parent().parent().remove(); 
    }); 
});

我已經添加上的jsfiddle的example here但不得不交換你的img標籤的標籤不能訪問你的形象。

來源

2011-03-27 20:31:09 Swaff

jquery添加/刪除html行

回答

相關問題