jquery - 为什么我的输入在 Bootstrap 中的格式不正确

Question

我有一个表单，它是动态创建的，这就是 jquery 的原因(它更容易)。我试图找出输入字段格式不正确的原因。

我刚刚改变了它的格式化方式，从在表格中，到更自举的方式，这样，只有我放置图标的输入字段才能正常工作。当我在表中有相同的字段时，jQuery 工作正常。

我做错了什么？

还有一个jsfiddle .

这是表格的代表性部分:

<div class="container">
  <div class="form-group row">
    <label for="first_name" class="sr-only">*
      <label for="id_first_name">First name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="last_name" class="sr-only">*
      <label for="id_last_name">Last name:</label>
    </label>
    <div class="input-group">
      <input type="text" name="last_name" required maxlength="50" required id="id_last_name">
    </div>
  </div>
  <div class="form-group row">
    <label for="phone" class="sr-only">*
      <label for="id_phone">Phone:</label>
    </label>
    <div class="input-group">
      <input id="id_phone" name="phone" type="tel" required />
    </div>
  </div>
</div>

因为我的字段是动态创建的，而且它们的属性需要更多的工作才能获得，所以我使用 jQuery 将 form-control 类添加到输入，以及其他一些小事情。

这是代码:

$("input[type='email']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>');
$("input[type='tel']").parent('div:first').prepend('<div class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></div>');
$('input').addClass('form-control').each(function () {
    var $this = $(this);
    var $label = $('label[for="' + $this.attr('id') + '"]');
    $this.attr('placeholder', $label.text().slice(0, -1));
});
$('select').addClass('form-control');

Answer 1

发生这种情况是因为您在 input-group 元素中进行了常规输入，但没有在其中添加预期输入的图标。

对于任何没有图标的输入，将您的 html 更改为:

<div class="input-group">
  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">
</div>

简单地说:

  <input type="text" name="first_name" required maxlength="50" required id="id_first_name">

格式将按预期工作。

working jsfiddle