我想要做的是添加和删除列表项。我已经将它添加到列表中的新项目,我可以删除现有的项目,但不删除已添加的项目。看起来它会起作用,但事实并非如此。任何帮助,将不胜感激!代码如下:
JQuery的:
<script type="text/javascript">
$(function(){
$('a#add').click(function(){
$('<li><a href="#" id="remove">--</a>List item</li>').appendTo('ul#list');
});
$('a#remove').click(function(){
$(this).parent().remove();
});
});
</script>
HTML:
<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
<li><a href="#" id="remove">--</a> List item</li>
</ul>
答案 0 :(得分:3)
代码的问题不在于缺少唯一的id值 - 尽管应该使用一类'remove' - 主要问题是新添加的项目没有与之关联的点击处理程序他们。添加点击处理程序的代码在创建任何新项目之前执行。
应该调查live()方法的使用 - 我不能在这方面提供更多建议,因为我自己还没有必要使用它。
答案 1 :(得分:2)
你走了:
jQuery(function($) {
$('#add').click(function(e) {
$('<li><a href="#" class="remove">--</a>List item</li>').appendTo('#list');
e.preventDefault();
});
$('.remove').live('click', function(e) {
$(this).parent().remove();
e.preventDefault();
});
});
答案 2 :(得分:1)
试试这个
$('a#remove').live('click',function(){
$(this).parent().remove();
});
或
$('a#remove').live('click',function(){
$(this).remove();
});
答案 3 :(得分:0)
忽略您的元素应具有唯一ID属性的事实,有一件事要始终牢记:将函数绑定到事件时 - 例如$(selector).bind('click', function)
或{{ 1}} - 只有DOM中与特定时刻的选择器匹配的元素才会按预期运行。如果您添加更多与之后选项匹配的元素,则这些元素不会神奇地与所需行为相关联。
这是$(selector).click(function)
jQuery函数存在的原因之一,我建议你看一看。另一种方法是手动将所需的函数绑定到添加到DOM的元素(就像Felix向您展示的那样)。
答案 4 :(得分:-2)
id
属性应该是唯一的,你的HTML是无效的,因此jQuery不起作用(我打赌a#remove
选择器只选择第一项)。使用其他内容,例如name
,这不应该是唯一的。此外,您可能希望使用.parent("li")
。这是我如何做到这一点:
<强> jQuery的:强>
<script type="text/javascript">
function setEvents() {
$("a#add").click(function() {
$("#list").append(
$("<li>").append(
$('<a href="#" name="remove">--</a>').click(removeItem)
).append("List item")
);
});
$('a[name=remove]').click(removeItem);
}
function removeItem(e) {
$(this).parent("li").remove();
}
$(document).ready(setEvents);
</script>
<强> HTML:强>
<a href="#" id="add">Add List Item</a>
<ul id="list">
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
<li><a href="#" name="remove">--</a> List item</li>
</ul>