Question

我有一个动态创建的表单，这是jquery的原因（它更容易）。我试图弄清楚为什么输入字段没有正确格式化。

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

我做错了什么？

以下是表格的代表性部分：

<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">

，格式化将按预期工作。

为什么我的输入格式无法在bootstrap

1 个答案:

working jsfiddle