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) { .... })

免责声明：深夜排序＆amp;未经测试！

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事件处理程序自动附加到动态创建的项目

jQuery在创建后删除元素

3 个答案: