clone another div that time jquery not work

Question

see here demo 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;

    });

});

on first input i click that time auto suggest load but whenever i add new input that time autosuggestion not load.what i do wrong.

i think its depend on load url that time work jquery after load whenever add new input that time jquery not load again and not give me any list on another input click.please help me. thanks in advance.

Answer 1

Firstly, since you are cloning elements, I would suggest using a class instead of an id since there will be multiple. When you call autocomplete() be sure to target the object that triggered the event. What's happening is that you're binding autocomplete() to #ex_name and it's only effecting the first instance. Here you'll see I've bound it to 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>