想要添加元素。 怎么了？

在这个 JSfiddle中我有一个复选框，一个标签和一个提交按钮。

选中复选框并单击提交时，应显示“x”，就像现在一样。

取消选中该复选框后，单击“提交”，“x”将消失，就像现在一样。

问题是，如果选中复选框，则会再次出现“x”，并单击“提交”。

这是我的代码

$('form').submit(function() { if( $("input[type=checkbox]").is(':checked')){ $("label").add(); }else{ $("label").detach(); } return false; }); 
  x Submit  

知道什么是错的吗？

Answer 1

好吧，如果你使用show()和hide()而不是add()和detach() ，它就可以了。

但我不确定这种方法是否解决了你想要实现的目标。

Answer 2

x不会再次出现，因为您没有添加分离元素，而是尝试添加没有文本的新元素。

 $("label").add(); 

看到正确使用add 。

此外，您正在分离而不保存引用以将其附加回来。 查看关于jQuery文档的分离示例

Answer 3

当您detach标签时，它不再在DOM中，因此$('label')不再有效。 你必须将节点存储在某个地方，而不是在DOM中。

另外， add不是将节点添加到DOM中的正确function。

 var $label = $("label"); $('form').submit(function() { if( $("input[type=checkbox]").is(':checked')){ $("input[type=checkbox]").after($label); } else { $label.detach(); } return false; }); 

这是一个实例。

Answer 4

分离后，标签不再是DOM的一部分，所以你不能再使用$('label')选择它，而add()不会做你认为它做的事情，你可能在寻找after() ？

工作小提琴：

 xLabel = $("label"); $('form').submit(function() { if( $("input[type=checkbox]").is(':checked')){ $("#element").after(xLabel); }else{ $("label").detach(); } return false; });