想添加元素。怎么了？

Question

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

当复选框被选中，并且点击提交时，会出现一个'x'，就像现在所做的那样。

当复选框未选中，并单击提交时，'x'应该消失，就像现在所做的那样。

问题是，'x'不再出现，如果复选框被选中，并且点击提交。

这是我的代码

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


<form action="" method="post"> 
<input id="element" signed" type="checkbox" checked> 
<label for="element">x</label> 
<button type="submit">Submit</button> 
</form> 

任何想法有什么不对？

Answer 1

那么，如果你使用show()和hide()而不是add()和detach()，它的工作原理。

但我不确定如果这种方法解决你想要实现的。

Answer 2

当您标注detach时，它不再位于DOM中，因此$('label')不再有效。您将不得不将节点存储在某个位置，而不在DOM中。

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

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

Here's a live example.

Answer 3

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

$("label").add(); 

查看正确使用add。

此外，您正在分离并且不保存引用以将其重新附加回去。见an example of detach on jQuery docs

Answer 4

取下标签后DOM的不再是一部分，这样你就可以使用$('label')不再选择它，也add()没有做什么，你想这样做，你可能会寻找after()？

Working fiddle:

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