изменение jQuery() не работает

Question

На моей странице есть три тега HTML html.

Я хочу, чтобы эти три выберите метки, чтобы иметь следующие функции:

При изменении Selecta, чем автоматическая смена SELECTB по Selecta. Когда была выбрана опция selectB, когда я изменяю selectB, чем selectC, автоматическое изменение в соответствии с selectB.

(

Например ...

первый вариант Selecta имеют певица, кинозвезда, SELECTB просто пустой.

когда опция певец проверил, SELECTB автоматически создать вариант "Lady Gaga", " «Celine Dion», «Whitney Houston», если три певца создали, когда я проверил «Lady Gaga», selectC создаст опции «день рождения», «Facebook», «google +».

когда опция кинозвезды отмечена, selectB автоматически создать опцию "Bruce Wi llis »,« Matt Damon »,« Will Smith ». Если три звезды кино создали, когда я проверил« Bruce Willis », selectC создаст варианты« день рождения »,« Facebook »,« google + ».

)

Моя проблема ... когда я изменяю SELECTB, $ ("# selectB_id") изменение() не работает

Ниже мой 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

На этой линии:

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

Как вы видите, вы добавляете #service_type элемент в DOM, после прикрепления обработчик события к нему. По этой причине вы должны использовать делегирование событий. Это может быть сделано с помощью .on() метода в JQuery:

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

• Обратите внимание, что ваш #second_li элемент должен быть в статике на этой странице. В противном случае используйте другой селектор.

---

Литература.

• .on() - JQuery API документация

Answer 2

Используйте событие делегации:

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