Jquery AutoComplete is not working in dynamically added form fields

Question

I am repeating 3 fields in form, All are having autoComplete.

Fields:

    <input type="text" class="input-block-level" Placeholder="College" name="College" />
    <input type="text" class="input-block-level" Placeholder="Course" name="Course" />
    <input type="text" class="input-block-level" Placeholder="Major" name="Major" />
    <a style="cursor: pointer" onclick="AddThisCollege()">Add More </a>

AutoComplete JS

  $( "input[name='College']" ).autocomplete({
    source: availableTags
  });

  $( "input[name='Course']" ).autocomplete({
    source: availableTags
  });

  $( "input[name='Major']" ).autocomplete({
    source: availableTags
  });

AddThisCollege() Code:

$("#CollegeListDiv").append('<br /><div class="CollegeList"> <input type="text" class="input-block-level" Placeholder="College" id="txtCollege" name="College" /> <input type="text" class="input-block-level" Placeholder="Course" id="txtCourse" name="Course" /> <input type="text" class="input-block-level" Placeholder="Major" id="txtMajor" name="Major" /> </div>');

Auto Complete is working for first three classes, it is not working for dynamically added fields.

Answer 1

Add your autocomplete function in inside AddThisCollege function too.then only event attached to dynamic elements

Try this

 function AddThisCollege(){

   $("#CollegeListDiv").append('<br /><div class="CollegeList"> <input type="text" class="input-block-level" Placeholder="College" id="txtCollege" name="College" /> <input type="text" class="input-block-level" Placeholder="Course" id="txtCourse" name="Course" /> <input type="text" class="input-block-level" Placeholder="Major" id="txtMajor" name="Major" /> </div>');
    $( "input[name='College'],input[name='Course'],input[name='Major']" ).autocomplete({
        source: availableTags
      });
    }