CSS-выравнивание jWuery's replaceWith () не совпадает с точно таким же прямым кодом

Question

Это действительно странная проблема, с которой я столкнулся, и я не совсем уверен, какой код вставлять сюда, потому что там довольно много, поэтому я действительно ищу теоретические решения.

По сути, я использую jQuery replaceWith (), чтобы добавить материал в поле после входа пользователя. Он добавляет тот же код, который будет показан на странице php (после проверки того, что пользователь вошел в систему). Это было сделано так, когда они входят в систему, jQuery добавляет их содержимое, но оно должно быть точно таким же, если они обновляют или переходят на другую страницу сайта.

Это в основном работает, за исключением нескольких элементов формы, которые выглядят не выровненными после того, как jQuery заменит содержимое. После обновления страницы они выровнены так, как должны быть.

Есть идеи, что может происходить? Я просмотрел инструменты разработчика Chrome, просматривая поля CSS для этих элементов и окружающие их элементы, поля / отступы и т. Д. В точности совпадают, но отображаются странно, пока не обновятся !!

Это сводит меня с ума - кто-нибудь видел такое раньше?

Приветствия

Scott

Скриншоты могут помочь -

Вот пример кода:

<?php
    echo '<div id="accountpanel">
            <div id="selectclientbox">
              <form id="formSelectClient" action="" onsubmit="return false;">
                  <select id="selectClient">
                      <option>Client 1</option>
                      <option>Client 2</option>
                      <option>Client 3</option>
                      <option>Client 4</option>
                  </select>
                  <select id="selectAttribute">
                      <option>Change ID</option>
                      <option>Change Userame</option>
                      <option>Change Password</option>
                      <option>Change Name</option>
                      <option>Change Email Address</option>
                  </select>
                  <input id="changeDetail" class="coolbox" type="text" size="38" maxlength="128" />
                  <input id="updatebtn" type="button" value="update" onclick="updatedetail()" />
              </form>
              <form id="formUpdateClient" action="" onsubmit="return false;">

                  <section>
                      <label for="changeCurrency">Currency</label><input id="changeCurrency" class="text" type="text" maxlength="1" />

                      <input id="updatebtn2" type="button" value="update" onclick="updatecost()" />
                  </section>
              </form>
          </div>
    </div>';
?>

<div id="accountpanel2">
</div>
<script type="text/javascript">
            $('#accountpanel2').replaceWith('<div id="accountpanel2">' + 
                '<div id="selectclientbox">' +
              '<form id="formSelectClient" action="" onsubmit="return false;">' +
                  '<select name="">' +
                      '<option>Client 1</option>' +
                      '<option>Client 2</option>' +
                      '<option>Client 3</option>' +
                      '<option>Client 4</option>' +
                  '</select>' +
                  '<select name="">' +
                      '<option>Change ID</option>' +
                      '<option>Change Userame</option>' +
                      '<option>Change Password</option>' +
                      '<option>Change Name</option>' +
                      '<option>Change Email Address</option>' +
                  '</select>' +
                  '<input id="changeDetail" class="coolbox" type="text" size="38" maxlength="128" />' +
                  '<input id="updatebtn" type="button" value="update" onclick="updatedetail()" />' +
              '</form>' +
              '<form id="formUpdateClient" action="" onsubmit="return false;">' +

                  '<section>' +
                      '<label for="changeCurrency">Currency</label><input id="changeCurrency" class="text" type="text" maxlength="1" />' +
                      '<input id="updatebtn2" type="button" value="update" onclick="updatecost()" />' +
                  '</section>' +
              '</form>' +
          '</div>');
</script>

Answer 1

Хорошо, глядя на ваш пример кода, я вижу большую разницу между HTML-кодом, который вы используете для визуализации страницы, и кодом, который вводится.

В строке JavaScript у вас есть конструкции, которые выглядят так (это всего лишь пример, возможно, не та строка, которая вызывает проблему):

'<select name="">' +
  '<option>Change ID</option>' +
  '<option>Change Userame</option>' +
  '<option>Change Password</option>' +
  '<option>Change Name</option>' +
  '<option>Change Email Address</option>' +
'</select>' +

И в HTML этовыглядит следующим образом:

   <select name="">
     <option>Change ID</option>
     <option>Change Userame</option>
     <option>Change Password</option>
     <option>Change Name</option>
     <option>Change Email Address</option>
  </select>

Результат для синтаксического анализатора - это две совершенно разные вещи, потому что не JavaScript имеет значительное количество пробелов и возврат каретки + перевод строки между каждым элементом.

Это обратное тому, что я описал - похоже, вам нужно пустое пространство, чтобы оно выглядело правильно.

Есть два способа решения этой проблемы, которые сразу приходят на ум.1) Храните ваши HTML-шаблоны в теге скрипта.Мне это нравится, потому что это облегчает их редактирование, и вы не имеете дело с большим количеством цитат и плюсов в каждой строке.или 2) Добавьте хотя бы один пробел в конец каждой строки перед конечной кавычкой и добавьте.

---

Да, я видел это много лет назад, отследил его до пробела между тегамиконец и начало тега.Не должно иметь значения, но имеет значение.

У меня было что-то вроде этого

..</tag1> <tag2>...

И я изменил его на

..</tag1><tag2>...

Это решило проблему.

Кажется, я помню, что это чаще встречалось в IE и элементах списка, но я мог помнить неправильно.