jquery .append автоматически отключает пробелы

Я пытаюсь добавить новые данные в контейнер div, используя функцию jquery .append(). Но добавленный результат сокращает пробелы между созданными метками. Проверьте скриншот: enter image description here jquery .append автоматически отключает пробелы

Как исправить эту проблему?

Javascript и HTML код приведены ниже:

$("a.add-member").click(function(){ 
 
    var user = '<div class="row user">'+ 
 
     '<div class="col-md-6">[email protected]</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">[email protected]</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">[email protected]</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>

источник

2015-06-04 Ck Maurya

В вашем jQuery нет пробелов. Вероятно, это проблема. –

Удалите пробелы из исходного HTML и используйте 'padding' или' margin'. Ширина пробелов ненадежна, поскольку они будут меняться между браузерами и ОС. –

Но я тоже не вписывал никаких пробелов в HTML. Тем не менее он отлично работает. Почему бы не jquery тогда? –

Добавлены пробелы в JQuery код:

$("a.add-member").click(function(){ 
    var user = '<div class="row user">'+ 
        '<div class="col-md-6">[email protected]</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); 
})

источник

2015-06-04 07:03:59

Так как вы написали свой код в HTML в отдельной строке для каждый раз, но когда вы добавляете div или что-либо в jQuery, создавая строку, он рассматривает ее как одну строку. Итак, если вы добавите \ n на каждую строку, это сработает.

user = '<div class="row user">' + 
       '<div class="col-md-6">[email protected]</div>' + 
       '<div class="col-md-4">' + 
       '<div class="user-roles">' + 
       '<span class="label label-user-role">Role 1</span>\n' + 
       '<span class="label label-user-role">Role 2</span>\n ' + 
       '<span class="label label-user-role active">Role 3</span>\n ' + 
       '</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>'; 
       $(".users").append(user).hide(0).fadeIn(700);

источник

2015-06-04 07:33:10

jquery .append автоматически отключает пробелы

ответ

Смежные вопросы