这是我遇到的一个非常奇怪的问题,我不确定要粘贴哪些代码,因为有很多代码,所以我真的在寻找理论解决方案。
基本上,我使用jQuery的replaceWith()在用户登录后向框中添加内容。它添加了与php页面吐出的完全相同的代码(检查用户已登录)。这样做是因为当他们登录时,jQuery会添加他们的内容,但如果他们刷新或移动到网站上的另一个页面,它应该完全相同。
除了在jQuery替换内容之后看起来不对齐的一些表单元素之外,这主要起作用。刷新页面后,它们按照应有的方式对齐。
任何想法可能会发生什么?我已经浏览了Chrome的开发工具,查看这些元素的CSS边距及其周围元素和边距/填充等完全相同但显示出奇怪的效果直到刷新!!
这让我疯了 - 以前有人见过这种行为吗?
干杯,
斯科特
截图可能有帮助 -
以下是代码示例:
<?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>
答案 0 :(得分: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和列表元素中更常见 - 但我记得错了。