Reputation: 2790
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.
Upvotes: 0
Views: 1355
Reputation: 20408
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
});
}
Upvotes: 3