2009-01-27 49 views
3

我有一个无序的列表元素,我想在最后追加一个项目。下面是当前的代码:JQuery追加和绑定

的初步清单:

<ul id="all"> 
    <li> 
    Some text <input type="button" class="remove" value="-" /> 
    </li> 
    <li> 
    Some text <input type="button" class="remove" value="-" /> 
    </li> 
</ul> 

,去除列表项的代码:

$(".remove").click(function() { 
    $(this).parent().remove(); 
}); 

,增加了一个新的列表项的代码:

$("#add").click(function() { 
    $("#all").append(
    "<li>" 
    + "Some text" 
    + "<input type=\"button\" class=\"remove\" value=\"-\" />" 
    + "</li>" 
); 
}); 

用于添加新列表项的按钮:

<input type="button" id="add" value="Add" /> 

当我点击按钮,一个新的列表确实添加到列表中,但点击删除按钮不会做任何事情。

我该如何做这项工作?


奖金:更改“一些文本”与“<input type="text" /> <input type="text" />”,你会看到两个新增加的输入元素将有从最初的人他们之间的距离不同。为什么? (注意:使用Firefox 3.0.5)。

回答

10

我觉得你是以后的新的jQuery 1.3的功能之一 - 现场活动。见http://docs.jquery.com/Events/live

这个工作对我来说:

$(".remove").live("click", function() { 
    $(this).parent().remove(); 
}); 

奖励:

我还使用FF 3.0.5,和我有两个文本框之间的空间是相同的。如果你的意思是在第二个文本框和按钮之间,那么我必须同意eimaj并且说空白是原因。

+0

我的jQuery的旧版本。我更新了它,这工作正常。 – pek 2009-01-27 22:33:00

3

#add增加.remove仅施加到与所有类现有元素的节点树(DOM)“去除”一次(大概的onload)。使用live也将处理程序添加到新元素。

(奖金:大小/呈现问题都只是空白:添加一个空格这样的“一些文本”在Ff3.0.5对我的作品)

+0

感谢您的奖金..;) – pek 2009-01-27 22:29:12