jQuery创建后删除元素

我正在构建一个jQuery可排序列表，其中用户可以从表中添加项目，拖动和排序和/或删除他们。我可以添加和排序没有问题，但我不能解决如何删除项目元素添加后。我对js/jQuery相对来说比较陌生，所以我有一种感觉，在这里学到一些关于它如何工作的新东西！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不会把所生成的新项目 - 但我不敢肯定，所以我不知道从哪里开始修复它

干杯

来源

2011-03-23 Alex

你应该使用实时功能附加事件动态添加元素。

试试这个绑定点击事件a.remove元素：

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

来源

2011-03-23 03:36:05 Chandu

啊太棒了！这就是诀窍！哇，我不知道要多久才能找到解决方案！由于 – Alex 2011-03-23 03:39:30

我想你也应该更换'$（本）.parent（）删除（）;''由$（这）一个.remove（）;'否则整个'div'被删除。 – 2011-03-23 03:40:39

哦，是的，你说得对 - 我忘了编辑位。生成的元素应该是这样的，而不是：''

Item 1 remove

– Alex 2011-03-23 03:56:40

这里是我的我是多么想你应该修改代码的答案：
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事件处理程序自动连接到动态创建

来源

2011-03-23 03:52:52

项目你是绝对正确，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) { .... })

免责声明：晚上&末类型化没有测试！

来源

2011-03-23 04:02:11

jQuery创建后删除元素

回答

相关问题