Niceform jquery Dropdown change event change not working

Question

Niceform jquery Dropdown change event change not working my code is is here

<select style="width:1px;" class="NFhidden" size="1" id="aics_Enquiry" name="aics_Enquiry">
    <option value="0">General enquiry</option>
    <option value="1"> Request a statement</option>
    <option value="2"> Feedback</option>
    <option value="3"> Other</option>
</select>

And resulted code in html is here.

 <div class="NFSelect" style="width: 5px; left: 767px; top: 593px; z-index: 999;"><img src="/templates/liberty/images/0.png" class="NFSelectLeft">
 <div class="NFSelectRight">Feedback</div>
 <div class="NFSelectTarget" style="display: none;">
 <ul class="NFSelectOptions">
 <li><a href="javascript:;">General enquiry</a></li>
 <li><a href="javascript:;">Request a statement</a></li>
 <li><a href="javascript:;" class="NFOptionActive">Feedback</a></li>
 <li><a href="javascript:;">Other</a></li>
 </ul>
 </div>
 </div>
 <select style="width:1px;" class="NFhidden" size="1" id="abc" name="abc">
 <option value="0">General enquiry</option>
 <option value="1"> Request a statement</option>
 <option value="2"> Feedback</option>
 <option value="3"> Other</option>
 </select>

Change event is not working as my jquery code is here for change event

$("#abc").change(function(){
// Code implementation  in change event
});

But it is not working because here select html tag is not change. selected and selected item is converted in div tag.

How to work with dropdown change event?

Answer 1

your jquery should be:

$(document).on('change', '#abc', function(){
     // code
});

use on to target elements generated dynamically or created after the page loads.