jQuery remove()或after()导致删除空格

Question

我有以下html:

<p>This is some random text in a paragraph with a <span class="blue">blue</span> word.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <i>word</i>.</p>
<p>This is some random text in a paragraph with a <span class="blue">blue</span> <span class="blue">word</span>.</p>

我的CSS如下:

.blue{
  color:blue;
}
.popup{
  background-color:lightblue;
}

最后我的JS:

var popup = false;
$(".blue").click(function(){
  if (!popup){
    $(this).after("<div class='popup'>This is some popup text</div>");
    popup = true;
  }
  else{
    $(".popup").remove();
    popup = false;
  }
});

现在我的问题是,当我在我的弹出类上调用remove函数时它会删除标记之间的空格如下面的一些答案中所解释的,after函数也可能导致这种情况..例如:

<span class="blue">blue</span> <i>word</i>

变

<span class="blue">blue</span><i>word</i>

当蓝色类后面的文本不在标签中时,它不会这样做,例如:

<span class="blue">blue</span> word

为什么会发生这种情况,我该如何预防呢？

如需进一步参考,这里有一个小提琴:http://jsfiddle.net/6fqDq/

编辑:似乎此问题已本地化为Chrome,因为它不会出现在FF或IE中.

Answer 1

发生这种情况的原因是因为你添加了一个块元素(div),块元素分成一个新行,然后当它被删除时,它会删除它后面的空格,因为对于HTML,空格和换行符是几乎相同的.

你有几个解决方案,其中一些在这里提到:

1. 使用 &nbsp
2. 在<i>标签内部而不是标签之间放置一个空格,这样<i> word</i>可以正常工作.
3. 在<span>标签上使用标签而不是div标签after.

Answer 2

我不认为问题是删除,但在这种情况下可能忽略文本节点,因此忽略空格.如果你使用append,它也会将元素放在其他地方,问题就会消失.

http://jsfiddle.net/6fqDq/8/

var popup = false;
$(".blue").click(function() {
    if (!popup) {
        $(this).append("<div class='popup'>This is some popup text</div>");
        popup = true;
    } else{
        $(".popup").remove();
        popup = false;
    }
});