動態替換一個div

Question

我想替換DIV

<div class="models"> 
    <select disabled="disable"> 
     <option>Model Name</option> 
    </select> 
</div> 

我努力的目標div和加載選擇框這樣

jQuery('.models select').change(function() { 
     var model = jQuery('.models option:selected').text(); 

內的選擇框裏面選擇框我沒有收到關於變化的任何行動，雖然

http://jsfiddle.net/HNgKt/

Answer 1

嘗試FOLL因爲：

/* using delegate version of .on */ 
jQuery(document).on('change', '.brands', function() { 
    var brand = jQuery('.brands option:selected').text(); 
    brand = cleanString(brand); 
    jQuery('.models').load('/pf-models #' + brand); 
}); 

jQuery(document).on('change', '.models select', function() { 
    var model = jQuery('.models option:selected').text(); 
    model = cleanString(model); 
    jQuery('#show-models').load('/pf-urls #' + model); 
}); 

對於處理「動態」的元素，你想用delegate指定動作。這基本上保留了一個方法分配給符合描述的所有元素。

參見：

1. http://api.jquery.com/delegate/
2. http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

簡單的變化：綁定你的改變事件處理程序div容器（這應該是目前該執行時），並獲取文本值由此：

jQuery('.models').on('change','select',function() { 
    var model = jQuery(':selected',this).text(); 
    var modelValue = jQuery(':selected',this).val(); 
}); 

注意：你的f iddle和標記有它diabled，當然就需要先啓用，是這樣的：

jQuery('.models>select').prop('disabled',false); 

編輯：用你的小提琴，我搗碎左右，註釋掉你的負擔 - 因爲它沒有在那裏工作和cleanstring，不存在，並且這個工作原理：

jQuery('.brands').change(function() { 
    alert('here'); 
    var brand = jQuery('.brands option:selected').text(); 
    // brand = cleanString(brand); 
    //jQuery('.models').load('/pf-models #' + brand); 
    jQuery('.models>select').append('<option >She is a classic</option>').prop('disabled', false); 
}); 

alert(jQuery('.models>select').prop('disabled')); 

jQuery('.models').on('change', 'select', function() { 
    var model = jQuery(":selected", this).text(); 
    alert(model); 
    model = cleanString(model); 
    jQuery('#show-models').load('/pf-urls #' + model); 
}); 

更新撥弄：http://jsfiddle.net/HNgKt/6/

EDIT進一步的詳細示例中，仍然是基於有效的標記假設從負載回來上我已經取代了第一部分一個html替換罪CE我們還沒有接觸到的部分：

jQuery('.brands').change(function() { 
    var brand = jQuery('.brands option:selected').text(); 
    $('.models').html('<select class="models"><option >' + brand + ' She is a classic</option><option>clunker</option></select>'); 
}); 
jQuery('.models').on('change', 'select', function() { 
    var model = jQuery(":selected", this).text(); 
    alert('model:' + model); 
}); 

小提琴爲：http://jsfiddle.net/HNgKt/7/

警報的模型，如果你選擇一個品牌，然後一個模型。

Answer 3

嘗試以下步驟，

1. 對品牌變化列表中進行Ajax調用，並確保在結果您收到新的列表選項，也可以動態地在jQuery的準備選項列表也。
2. 並且調用成功後，用收到的數據重新填充新列表。

jQuery('.brands').change(function() { 
    var brand = jQuery('.brands option:selected').text(); 
    brand = JSON.stringify(cleanString(brand)); 
     $.ajax({ 
      type: "GET",  //GET or POST or PUT or DELETE verb 
      url: ajaxUrl,  // Location of the service 
      data: brand ,  //Data sent to server 
      contentType: "",  // content type sent to server 
      dataType: "json", //Expected data format from server 
      processdata: true, //True or False 
      success: function (data) {//On Successful service call 
      var $newList = $(".models select'").empty(); 
      $newList.append(data); 
      }, 
      error: function(){} // When Service call fails 
     }); 
});