动态地向HTML表单添加输入

Question

如果我们单击"添加"链接,则应将新输入添加到表单中.

此外,每个添加的输入附近应该有"删除"链接.如果我们点击它,则应删除此输入.

我该怎么做呢？

Answer 1

我正在努力是否投票将其作为副本关闭,即使这不是确切的.但你正在寻找的东西似乎在这里得到解答.主要区别在于它们绑定到元素的change事件select:

$("#selectBox").change(function() {

你会改为绑定到click一个锚元素的事件(你的"添加"链接):

$("#addLink").click(function() {

"删除"链接将以类似的方式工作.当为新输入创建HTML时,您还需要在将其添加到DOM之前创建"删除"链接(.html()在引用的代码中调用函数).你要确保你给HTML添加一个独特的id(包裹在div一个独特id的例子),以及所添加的"删除"链接.

然后,在将其添加到DOM之后,您将向"删除"链接添加一个事件处理程序:

$("#deleteLink123").click(function() {

在此处理程序中,您将引用id添加到DOM的容器的唯一容器并将其删除.我确信通过使用此处的.live()函数和一些更聪明的选择器,可以有更优雅的方式来处理这个问题.在尝试不太聪明以至于伤害持续的支持时,重新考虑这样的事情会很有趣.

在开发时,您需要记住一些额外的注意事项:

1. 锚标签是默认链接,但看起来你不希望它们链接到任何东西.你可以将它们链接到"#",但这并不是很优雅.您可以href完全从中删除属性,但是您还需要将它们设置为在视觉上像链接一样.不难,但也不直观.为什么不按钮？
2. 服务器处理时实际表单的行为由您决定.您可以动态地将元素添加到DOM的内容中,但这可能对服务器端没有帮助.但这完全是另一个问题.