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

Question

I have navigation with add tab function while, adding a tab the content div gets populated with a select box. Now from the options of the select box on changing will call respective forms and get appended to the 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 and creates the 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 the 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 what i need is on changing the options i need to add the form using ajax call and get appended in the div tab-content.

What is not working how you expect? FYI, that `select` event attachment looks like it [needs delegating](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). — George, Jul 17 '15 at 13:27
On changing the options in the select box is not calling the ajax from and eventually not appending the form — gintech, Jul 17 '15 at 13:28
Delegate your event handler, see the link in my last comment (http://stackoverflow.com/q/203198/1612146) — George, Jul 17 '15 at 13:29
@George can you please edit the code of what you want me to add, didn't understand from the example link. — gintech, Jul 17 '15 at 13:50

mjohns · Accepted Answer · 2015-07-17T14:04:49.637

As pointed out in the comments, you must delegate your event handler for the change event on your select. This is because the select is located within content that gets modified/added after the initial creation of the 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 for .on()

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

1 Answers1