jQuery在創建后刪除元素

Question

我正在構建一個jQuery可排序列表，用戶可以從表中添加項目，拖動和排序和/或刪除它們。 我可以添加和排序沒有問題，但我無法弄清楚如何刪除項目元素后添加。 我對js / jQuery比較新，所以我覺得這里有一些新的東西可以學習它是如何工作的！

我會在這里省略ui.sortable東西，因為我只關心刪除物品..

<table>
   <tr>
    <td><a class="addrelease" href="#" cat_id="1">add</a></td>
    <td>Item 1</td>
   </tr>
    <tr>
    <td><a class="addrelease" href="#" cat_id="2">add</a></td>
    <td>Item 2</td>
   </tr>
</table>

<div id="list"></div>

<script>
$("a.addrelease").click(function (e) {
  e.preventDefault();
  cat_id     = $(this).attr('cat_id');
  remove_str = " <a href=\"#\" class=\"remove\">remove</a>";
  str        = cat_id + remove_str;
  $(str).appendTo("#list").hide().fadeIn();
});
$("a.remove").click(function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});
</script>

我猜測javascript無法識別新生成的項目 - 但我不確定，所以我不知道從哪里開始修復它

干杯

Answer 1

您應該使用實時函數將事件附加到動態添加的元素。

嘗試將click事件綁定到a.remove元素：

$("a.remove").live("click", function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});

Answer 2

你是絕對正確的，javascript將無法識別新項目。

jQuery選擇器通常只匹配文檔中當前的元素。 當你使用$（“a.remove”）。function（）時，jQuery構建一個與“a.remove”匹配的節點列表，然后在每個節點上調用function（）。

.live（）函數是特殊的，並不直接將事件附加到元素 - 而是評估冒泡到DOM頂部的事件以查看它們是否與選擇器匹配。

恕我直言，最好的方法是在創建新列表條目時綁定刪除處理程序：

  str        = cat_id + remove_str;
  var remove = $(str);
  remove.appendTo("#list").hide().fadeIn();
  remove.click(function(e) { .... })

免責聲明：深夜打字未經測試！

Answer 3

以下是我認為您應該修改代碼的答案：
http://jsfiddle.net/RY5CP/

<table>
    <tr>
        <td><a class="addrelease" href="#" rel="1">add</a></td>
        <td>Item 1</td>
    </tr>
    <tr>
        <td><a class="addrelease" href="#" rel="2">add</a></td>
        <td>Item 2</td>
    </tr>
</table>

<div id="list"></div>

<script type="text/javascript">
    $("a.addrelease").click(function(e) {
        e.preventDefault();
        var catId = $(this).attr('rel');
        var itemName = $(this).closest('td').next('td').text();
        var newItem = '<p>' + catId + ' ' + itemName + ' <a href="#" class="remove">remove</a>';
        $(newItem).appendTo('#list').hide().fadeIn();
    });

    $("a.remove").live('click', function(e) {
        $(this).parent('p').remove();
    });
</script>

• 將cat_1 ， cat_2用作HTML屬性無效。 如果需要具有與項目關聯的特定值，則可以使用rel屬性
• 使用live()方法使click事件處理程序自動附加到動態創建的項目