auf Änderung funktioniert nicht in verschachtelten Dropdown-Liste

Question

hallo ich möchte Daten von business3 Daten nach Business2 und Business2 Daten nach Business1 Dropdown-Liste, sondern auf Änderung() von Business1 Ich habe Daten als Antwort, aber habe ich nicht bekommen Sekunde bei Änderung() in Dropdown-Liste.

<!-- ajax code for first business starts here --> 

      <script> 
        $(document).on('change', 'select.Business1', function(){ 
          var business1 = $('select.Business1 option:selected').val(); 
          alert(business1); 
          var value = $(this).val(); 

          $.ajax({ 
           type:"POST", 
           data: { business1:business1 }, 
           url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>', 
           success : function (data){ 

             $('#business2').empty(); 
             $('#business2').append(data); 
           } 
          }); 
        }); 
      </script> 


<!-- ajax code for first business ends here --> 

// Dieses Skript nicht funktioniert. Ich kann das zweite Änderungsereignis nicht finden.

<!-- ajax code for second business starts here --> 

      <script> 
        $(document).on('change','#business2',function(){ 
        alert('Change Happened'); 
        }); 
      </script> 


<!-- ajax code for second business ends here --> 

Ich habe auch mit Live() -Methode versucht, so auf dem ersten Drop-Down-Auswahl genannt aufmerksam und ruft dann der Ajax-Request fällt so zweite Füllungen nach unten (Alternate für die zweite Skript),

<script> 
        $(document).live('change', '#business2', function() { 
         alert('Change Happened'); 
        }); 
</script> 

Modellfunktion

public function select_business_sub_cat() 
    { 
     $business1 = $this->input->post('business1'); 
     $result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'"); 
     $row_cat1 = $result_sub_cat1->result(); 

     $data = array(
      'id' => $row_cat1['0']->id, 
      'name' => $row_cat1['0']->name 
      ); 
     echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>"; 
     // return $this->output->set_output($data); 
    } 

View -

<div class="form-group"> 
           <label>Business 1</label> 
           <select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1"> 
               <option value=""> Select Business </option> 
               <?php 
               $result_cat1 = $this->db->query("select * from category"); 
               $row_cat1 = $result_cat1->result(); 
               ?> 
               <?php foreach($row_cat1 as $item){ ?> 
               <option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option> 
               <?php } ?> 
           </select>       
         </div> 
         <div class="form-group"> 
           <label>Business 2</label> 
           <select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2"> 
               <option value=""> Select Business2 </option> 
           </select>       
         </div> 
         <div class="form-group"> 
           <label>Business 3</label> 
           <select name="txtBusiness4" id="business3" style="height: 30px;width: 100%;" class="Business3"> 
               <option value=""> Select Business3 </option> 
               <?php echo $abc; ?> 
           </select>       
         </div> 

Answer 1

Vielleicht ist das, weil durch $('#business2').html(data); rufen Sie an die Event-Handler entfernen, von jQuery Dokumentation: http://api.jquery.com/html

Wenn .html() verwendet wird, der Inhalt eines Elements zu setzen, alle Inhalte, die in diesem Element war vollständig ersetzt durch der neue Inhalt. Darüber hinaus entfernt jQuery andere Konstrukte wie Daten und Ereignis Handler von untergeordneten Elementen vor dem Ersetzen dieser Elemente durch den neuen Inhalt .

Eine Option wäre empty und append wie diese

$('#business2').empty(); 
$('#business2').append(data); 

von $('#business2').html(data);

Answer 2

The Script anstatt zu verwenden, die für Sie nicht funktioniert !!!

  <script> 
       $(document.body).on('change','#business2',function(){ 
       alert('Change Happened'); 
       }); 
     </script> 

Versuchen Sie dies anstelle des oben Skript:

$(document).on("change", "#business2", function(){ 
    alert('Change Happened'); 
});