JQuery change () not working

Question

There are three select html tags on my page.

I want these three select tags to have the following functions:

When I change selectA, than selectB automatically changes according to selectA. When the selectB option was selected, when I change selectB than selectC, they automatically change according to selectB.

(

For instance...

first select an option that has a singer, movie star, selectB is just empty.

when the singer’s option is checked, select the automatic selection option “Lady Gaga”, “Celine Dion”, “Whitney Houston”, if three singers created, when I checked “Lady Gaga”, selectC will create “birthday”, Facebook, “google + "

when the movie star option is checked, select the automatic selection option "Bruce Willis", "Matt Damon", "Will Smith." If three movie stars created when I checked Bruce Willis, selectC will create a birthday, Facebook, google +.

)

My problem ... when I change selectB, $ ("# selectB_id"). change () does not work

Below is the code of my javascript:

$(function(){ $("#lineselect").change( function() { $.ajax({ url: '/lineflow/ajaxgetselect', type:'POST', data:{ service_id:$("#lineselect option:checked").val() , level:1 }, success: function( res ){ var obj = jQuery.parseJSON(res); if( $("#lineselect").val() == 0 ) { $("#second_li").html(""); $("#third_li").html(""); } else if( $("#lineselect").val() == 1 ) { $("#second_li").html(""); $("#third_li").html(""); $("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>'); $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>'); for( i=0; i<obj.length; i++) { $('#service_type').append($("<option></option>") .attr("value",obj[i].id) .text(obj[i].name)); } } else if( $("#lineselect").val() == 2 ) { $("#second_li").html(""); $("#third_li").html(""); $("#second_li").html('<input type="text" id="url_name" name="url_name"></input>'); } else if( $("#lineselect").val() == 3 ) { $("#second_li").html(""); $("#third_li").html(""); $("#second_li").html('<select id="url_type" name="url_type"><option value="0">ALL</option></select>'); for( i=0; i<obj.length; i++) { $('#url_type').append($("<option></option>") .attr("value",obj[i].id) .text(obj[i].name)); } } }, error: function(obj, status, err){} }); }); $("#service_type").change( function() { // this change not work!!! $.ajax({ url: '/lineflow/ajaxgetselect', type:'POST', data:{ service_id:$("#service_type option:checked").val() , level:2 }, success: function( res ){ var obj = jQuery.parseJSON(res); $("#third_li").html(""); $("#third_li").html('<select id="service_name" name="service_name"><option value="0">ALL</option></select>'); for( i=0; i<obj.length; i++) { $('#service_type').append($("<option></option>") .attr("value",obj[i].id) .text(obj[i].name)); } }, error: function(obj, status, err){} }); }); 

});

Answer 1

In this line:

 $("#second_li").html('<select id="service_type" name="service_type"><option value="0">ALL</option></select>'); 

As you can see, you add the #service_type element to the DOM after attaching the event handler to it. For this reason you should use event delegation. This can be done using the .on() method in jQuery:

 $('#second_li').on('change', '#service_type', function () { $.ajax({ // }); }); 

• Note that your #second_li element must be in static on the page. Otherwise, use a different selector.

---

Literature:

• .on() - jQuery API documentation

Answer 2

Using event delegation:

 $("body").on('change', '#service_type', function() { // your code });