我有一个包含标签的div(如stackoverflow上的标签功能)。我使用ajax将新标签附加到这个外部div。一切工作正常,除了有一个额外的左边距或约5px的添加到新添加的标签。当我检查html时,没有保证金或填充列表,但它肯定存在。 Chrome,Firefox,Safari和Opera也会发生同样的情况。这里是我的代码:为什么jQuery append()为“ajaxed”数据添加左边距/填充?
HTML:
<div class="tags_wrap">
<div class="tag">
<div class="tag_wrap">Tag 3</div>
</div>
<div class="tag">
<div class="tag_wrap">Tag 2</div>
</div>
...
</div>
CSS:
.tags_wrap {
margin:1px 7px 5px 0px;
float:left;
text-align:left !important;
}
.tag {
padding:0;
margin:4px 7px 0 0;
border: 1px solid #094C7C;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background-color:#fff;
color:#000;
position:relative;
display:inline-block;
font-size:12px;
}
.tag_wrap {
position:relative;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border-top: 1px solid #1C7ABF;
border-right: 1px solid #1C7ABF;
border-bottom: 1px solid #1C7ABF;
border-left: 1px solid #1C7ABF;
}
的jQuery:
$(document).ready(function(){
$('form#addSomeTags').unbind('submit').bind('submit',function() {
var newTag = $("form#addSomeTags > input[name=tagField]").val();
$.ajax({
type: "POST",
url: 'add_tag.php',
dataType: 'html',
data: {tag:newTag},
success: function(data){
$('.tags_wrap').append(data);
}
}
});
return false;
});
});
的data
我的PHP脚本看起来成功完成后返回.ajax()
像其他标签一样:
<div class="tag">
<div class="tag_wrap">Tag 2</div>
</div>
在新的“ajaxed”标签上始终存在这种不需要的左边距或填充。如果我刷新页面,则此边距不再存在。任何想法为什么发生这种情况?
Ajax数据不处理风格。检查输出并查找nbsps或类似 – Marko 2013-05-06 02:05:14
我试图使用$ .trim(),但空间仍然存在。我还在服务器端使用了PHP trim(),然后将其回送给客户端,但那也不起作用。 – 2013-05-06 02:45:54