JQuery remove() или after(), вызывающий удаление пробелов

У меня есть следующий 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.

Ответ 1

Причина, по которой это происходит, состоит в том, что вы добавили элемент блока (div), элемент блока разбивается на новую строку, а затем, когда он удаляется, он убирает пробел с ним, который после него, потому что для HTML пробелы и Новая строка почти одинакова.

У вас есть несколько решений, некоторые из них были упомянуты здесь:

Используйте &nbsp
Поместите пробел внутри тега , а не между тегами, поэтому  word будет работать нормально.
Используйте тег  вместо тега div на after.

Ответ 2

Я не думаю, что проблема заключается в удалении, но с последующим в этом случае, который, вероятно, игнорирует текст node и, следовательно, игнорирует пробел. Если вы используете 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;
    }
});

Ответ 3

Не уверен, почему он это делает. Но быстрым решением было бы поместить белое пространство в тег . Вот так:

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

См. http://jsfiddle.net/6fqDq/5/

Ответ 4

просто добавьте  

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

Ответ 5

Используйте .append вместо .after()

if (!popup){
    $(this).append("<div class='popup'>This is some popup text</div>");
    popup = true;
}

Я не могу объяснить, почему это не сработает. После этого, но я думаю, что это может быть добавление в пробелы

DEMO

Ответ 6

Не знаете, почему это происходит, но, возможно, замените ваши пространства сущностями?   - это пространство. Вы можете сделать это с помощью javascript str.replace('> <', '> <' ) или в php str_replace('> <', '> <', str)