我正在尝试使用 jquery .append() 函数将新数据附加到容器 div。但是,附加的输出 trim 了创建的标签之间的空间。查看随附的屏幕截图:
我该如何解决这个问题?
Javascript 和 HTML 代码如下:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">abc@site.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Role 1</span>'+
'<span class="label label-user-role">Role 2</span>'+
'<span class="label label-user-role active">Role 3</span>'+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
});
<div class="users">
<div class="row user">
<div class="col-md-6">xyz@site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>
</div>
</div>
<div class="row user">
<div class="col-md-6">pqr@site.com</div>
<div class="col-md-4">
<div class="user-roles">
<span class="label label-user-role">Role 1</span>
<span class="label label-user-role">Role 2</span>
<span class="label label-user-role active">Role 3</span>
</div>
</div>
<div class="col-md-2 text-center">
<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>
</div>
</div>
</div>
最佳答案
在 jQuery 代码中添加空格:
$("a.add-member").click(function(){
var user = '<div class="row user">'+
'<div class="col-md-6">ajinkya.bandagale@gmail.com</div>'+
'<div class="col-md-4">'+
'<div class="user-roles">'+
'<span class="label label-user-role">Admin</span> '+
'<span class="label label-user-role">Observer</span> '+
'<span class="label label-user-role active">Normal</span> '+
'</div>'+
'</div>'+
'<div class="col-md-2 text-center">'+
'<a href="#" class="remove-member"><i class="fa fa-times-circle-o"></i></a>'+
'</div>'+
'</div>';
$("#add-team .users").append(user).hide(0).fadeIn(700);
})
关于javascript - jquery .append 自动 trim 空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30636900/