javascript - Dynamically creating a select and then on change ajax call to append html -

this question has answer here:

• event binding on dynamically created elements? 19 answers

i have navigation add tab function while, adding tab content div gets populated select box. options of select box on changing call respective forms , appended page.

index.php

<ul id="mytab" role="tablist">           <li role="presentation"><a href="#q1"  role="tab" >form 1</a></li>           <li><a href="#" class="add-contact" >add forms</a></li> </ul> 

above nav adds tab , creates below div in index.php

<div class="tab-content">      <div role="tabpanel" class="tab-pane fade in active" id="q1">       <form id="id1" class="form-horizontal" method="post">           <select id="" class="form-control" name="">              <option value="form1">form 1</option>              <option value="form2">form 2</option>           </select><form> </div>  

the content in div tab-content gets dynamically created

$( document ).ready(function() { $('select').bind('change', function(){       $.ajax({      url: "htmlforms.php",      context: document.body,      success: function(html){     $("#contentform").append(html);   }}); });}); 

now need on changing options need add form using ajax call , appended in div tab-content.

as pointed out in comments, must delegate event handler change event on select. because select located within content gets modified/added after initial creation of dom.

$(document).ready(function(){     $(document).on('change', 'select', function(){         $.ajax({              url: "htmlforms.php",              context: document.body,              success: function(html){             $("#contentform").append(html);         }});     }); }); 

jquery api documentation .on()