Question

点击此处演示https://jsfiddle.net/milan9898/zz40fpLL/

$("body").on("focus", "#ex_name", function() {
var milan =[
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
   $( "#ex_name" ).autocomplete({
        source: milan,
        minLength:0
    }).bind('focus', function(){ $(this).autocomplete("search"); } );
});


$(function()

{

    $(document).on('click', '.btn-add', function(e)

    {

        e.preventDefault();



        var controlForm = $('.controls:first'),

            currentEntry = $(this).parents('.entry:first'),

            newEntry = $(currentEntry.clone()).appendTo(controlForm);



        newEntry.find('input').val('');

        controlForm.find('.entry:not(:last) .btn-add')

            .removeClass('btn-add').addClass('btn-remove')

            .removeClass('btn-success').addClass('btn-danger')

            .html('<span class="glyphicon glyphicon-minus">-</span>');

    }).on('click', '.btn-remove', function(e)

    {

        $(this).parents('.entry:first').remove();



        e.preventDefault();

        return false;

    });

});

在第一次输入时我点击那个时间自动建议加载但是每当我添加新的输入时，自动提供的时间都没有加载。我做错了。

我认为它依赖于加载url时加载jquery后加载新的输入，时间jquery没有再次加载而没有给我任何列表另一个输入click.please帮助我。提前谢谢。

Answer 1

首先，由于您要克隆元素，我建议使用class而不是id，因为会有多个元素。当您致电autocomplete()时，请务必定位触发该事件的对象。发生的事情是你将autocomplete()绑定到#ex_name并且它只影响第一个实例。在这里，您会看到我已将其绑定到this：

$("body").on("focus", ".className", function() {
  var milan = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $(this).autocomplete({
    source: milan,
    minLength: 0
  }).bind('focus', function() {
    $(this).autocomplete("search");
  });
});
$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();
    var controlForm = $('.controls:first'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);
    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus">-</span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();
    e.preventDefault();
    return false;
  });
});

<script src="http://backslashinfotech.in/desertplanner/js/jquery-1.10.2.js" ></script>
<script src="http://backslashinfotech.in/desertplanner/js/bootstrap.min.js"></script>
<script src="http://backslashinfotech.in/desertplanner/js/jquery.min.js" ></script>
<script src="http://backslashinfotech.in/desertplanner/ckeditor/ckeditor.js" ></script>
<div class="panel panel-default">
  <!--excursions-->
  <div class="panel-heading">
    <h4 class="panel-title"> <a class=" accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> excursions </a> </h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse ">
    <div class="panel-body excursions">
      <!--/.excursions body-->
      <div class="control-group" id="fields">
        <label class="control-label" for="field1">Please add excursions </label>
        <div class="controls">
          <div class="entry input-group col-sm-3 col-xs-12 ">
            <div class="form-group col-sm-11 col-xs-12">
              <label for="exampleInputnumber"> Add Excursion </label>
              <input type="text" class="className form-control form_line_only" name="ex_name[]" id="ex_name" placeholder="Enter Add Excursion">
            </div>
            <span class="input-group-btn pull-left">
            <button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus">+</span> </button>
            </span> 
          </div>
          <br>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <!--/.excursions body--> 
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js" ></script>

克隆另一个div，那时jquery不起作用

1 个答案: