Блог

Главная - Вопросы по программированию - Пробелы исчезают для динамически вставляемого содержимого

Пробелы исчезают для динамически вставляемого содержимого

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть простая настройка javascript, которая создает или удаляет поля в зависимости от того, сколько хочет пользователь. Но когда пользователь нажимает кнопку добавить, чтобы создать другое поле, пробел между полями и элементами полностью исчезает. К нему не применяются отступы или поля, и даже если вы применяете поле, разница все равно остается.

Вот часть, которая повторяется

 <div class="tax-cont">
  <input type="text" class="form-control inline-field md" placeholder="Tax Name">
  <div class="input-group inline-group md">
    <input type="text" class="form-control" placeholder="Value">
    <label class="input-group-addon"><i class="fa fa-percent"></i></label>
  </div>
  <a class="addRemove btn btn-success btn-round btn-sm"><i class="fa fa-plus"></i></a>
</div>

И javascript

   // Add or Remove additional departure dates
  var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name"><div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div><a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';

  $('.tax-cont .addRemove.btn-success').on('click', function(){
    var lastTaxbox = $('.tax-cont').last();
    lastTaxbox.after($(taxContent));
  });
  $('.form-group').on('click', '.btn-danger', function(){
    $(this).parent().remove();
  });

Вот как это выглядит

Скриншот

Я не могу понять, почему это вообще происходит. Вот codepen для демонстрации.

Комментарии:

1. Это из-за display:inline-block проблемы: css-tricks.com/fighting-the-space-between-inline-block-elements

2. вам нужны новые с пробелом или первый без него?

3. да, вероятно, это из-за этого. на панели html у вас есть пробелы / табуляции / новые строки, и это создает эффект «ложного» поля. В javascript нет пробелов / табуляций / новых строк, и именно поэтому у вас нет поля.

4. Это кажется очевидным. Спасибо, что указали на это

Ответ №1:

Это происходит из-за того, как inline inline-block элементы и ведут себя, когда дело доходит до пробелов. В вашем исходном html источнике есть новая строка между <input> и <div> . Который является пробелом и который приведет к пробелу между двумя элементами на вашей странице.

 <input type="text" class="form-control inline-field md" placeholder="Tax Name"> <!-- new line -->
<div class="input-group inline-group md"> ... </div>

Однако, когда вы используете Javascript для добавления элементов в свой DOM , пробелы не node добавляются. Так что это просто склеит их вместе. Если вы удалите новую строку из своего исходного источника, два ввода также будут склеены вместе.

В качестве решения вы можете использовать margin-right <input> или margin-left на следующем <div> , чтобы убедиться, что все строки поддерживают одинаковый интервал.

Ответ №2:

Как указывали другие, причина отсутствия пробела между вставленным набором заключается в том, что между их кодом нет пробела. Спасибо Николасу за то, что поделился ссылкой, которая хорошо это объясняет.

Чтобы устранить проблему, я добавил пробел в код javascript ( amp;nbsp; ), который создает то же пространство, что и исходный DOM.

 var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name">amp;nbsp;<div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div>amp;nbsp;<a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';