Question

这是我遇到的一个非常奇怪的问题，我不确定要粘贴哪些代码，因为有很多代码，所以我真的在寻找理论解决方案。

基本上，我使用jQuery的replaceWith（）在用户登录后向框中添加内容。它添加了与php页面吐出的完全相同的代码（检查用户已登录）。这样做是因为当他们登录时，jQuery会添加他们的内容，但如果他们刷新或移动到网站上的另一个页面，它应该完全相同。

除了在jQuery替换内容之后看起来不对齐的一些表单元素之外，这主要起作用。刷新页面后，它们按照应有的方式对齐。

任何想法可能会发生什么？我已经浏览了Chrome的开发工具，查看这些元素的CSS边距及其周围元素和边距/填充等完全相同但显示出奇怪的效果直到刷新!!

这让我疯了 - 以前有人见过这种行为吗？

干杯，

斯科特

截图可能有帮助 - jQuery - incorrect PHP - correct

以下是代码示例：

<?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在每个元素之间有大量的空格和一个carrage返回+换行符。

这与我所描述的相反 - 似乎你需要白色空间让它看起来正确。

有两种方法可以立即解决这个问题。 1）将HTML模板存储在脚本标记中。我喜欢这个，因为它使它们易于编辑，并且你没有在每一行都处理大量的引号和加号。或者2）在结束报价前加上至少一个空格到每一行的末尾加上。

是的，我多年前见过这个，跟踪它到标签结束和标签开始之间的空间。无所谓，但确实如此。

我有类似的东西

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

并将其更改为

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

它解决了这个问题。

我似乎记得这在IE和列表元素中更常见 - 但我记得错了。

jQuery replaceWith（）CSS对齐与完全相同的直接代码不同

1 个答案: