Question

我为我的Project使用Django框架。我想在旧表格下面“添加”表格。表单包含可以“自动完成”使用jQuery的输入字段。这是我的代码...

HTML

<div id="history_education_form">

  <div id="1" class="his_edu">

    <div class="row">
      <div class="col-sm-12">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="material-icons">school</i>
          </span>
          <div class="form-group label-floating">
            <label class="control-label">Institute Name</label>
            <input type="text" class="form-control" name="edu_instituteName" id="institute2">  //This is the  Autocomplete that I want to add
          </div>
        </div>
      </div>
      <div class="col-md-12 text-center">
        <button type="button" id="1" class="btn btn-simple btn-xs btn_hisedu_remove"><i class="material-icons md-18 icon-delete">delete</i></button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-12 text-center">
  <div class="form-group">
    <div class="col-md-12">
      <p><button type="button" id="add_hisedu" class="btn btn-simple">Add More Institute</button></p>
    </div>
  </div>
</div>

HTML脚本

<script>
  $( function() {
    $( "#institute2" ).autocomplete({
      source: "{% url 'get_institute' %}",
            minLength: 1,
    });
  } );
  </script>

这是JS代码，用于在旧表单之后附加新表单

$(document).ready(function(){
  var i=1;
  $('#add_hisedu').click(function(){
    i++;
    var j=i+1;
    var append_text = '';

    // Head (Filter Select + Add More button)
    append_text += 'bra....bra...<input type="text" class="form-control" name="edu_instituteName" id="institute'+j+'"bra... bra...';


    $('#history_education_form').append(append_text);
    $( "#institute"+j ).each(function(){
      $(this).autocomplete({
        source: "{% url 'get_institute' %}",
        minLength: 1,
      });
    });

  });

  // Remove w/ Jquery Style
  $(document).on('click', '.btn_hisedu_remove', function(){
    var button_id = $(this).attr("id");
    $.confirm({
      title: 'Delete this History Education ?!',
      content: "Are you sure?",
      buttons: {
        YES: function(){
          $('#'+button_id+'').remove();
        },
        NO: function(){
        }
      }
    });
  });
});

我使用“附加”将div中的HTML代码附加（id =“ history_education_form”）并将输入自动完成的名称更改为Add i，这将依靠单击“添加更多研究所”

然后我添加脚本以与我附加的相同ID链接自动完成jQuery

单击添加时显示有效，但新输入的自动完成不起作用。我不知道要解决它，请帮助

具有自动完成功能的动态表单使用jQuery

0 个答案: