使用jQuery級聯選擇框

我想與html選擇框和jQuery ajax帖子級聯。當我選擇一個選項時，它將自己的值發送到另一個文件並獲取json值。是的，我用ajax文章做這個。但在回調函數中，我將添加另一個選擇框設置所有的jSON數據。而我這樣做是正確的。但是當我從添加的選擇框中選擇一個選項jQuery的'更改'事件不處理這個新的選擇框，並最終不起作用的其他功能。使用jQuery級聯選擇框

我的jQuery代碼如下：

$(document).ready(function(){ 

    $("#kategoriler select").on('change',function(e){ 

     var catID = $(this).val(); 

     if($(this).next().is("select")){ 
      $(this).nextAll("select").remove(); 
     } 

     console.log($(this)); 
     $.ajax({ 
      async: false, 
      type: "POST", 
      url: "ajax_cate_add", 
      data: "catID=" + catID, 

      success: function(data){ 

       if(data.length > 0){ 

        var $parent = $("#kategoriler select:last").after("<select></select>").next(); 

        for(var i = 0; i < data.length; i++){ 
         $parent.append("<option value=" + data[i].id + ">" + data[i].tr_adi + "</option>"); 
        } 
       } 
      } 
     }); 
    }); 
});

開始HTML代碼如下：

<div id="kategoriler"> 
    <select> 
     <option value="8">Rezervasyon</option> 
     <option value="7">E-Concierge</option> 
     <option value="6">Özel F?rsatlar</option> 
     <option value="5">Safira SPA &amp; Sa?l?k</option> 
     <option value="4">Toplant? &amp; Davetler</option> 
     <option value="3">Yeme &amp; ?çme</option> 
     <option value="2">Odalar &amp; Süitler</option> 
     <option value="1">Genel Bak??</option> 
    </select> 
</div>

但在控制檯當我鍵入跟隨代碼，它的運行：

$("select").change(function(){ 
     alert(2); 
});

從根選擇框選擇一個選項，並在上面的代碼後，我輸入控制檯，並從新選擇一個選項此代碼框確實工作並顯示警報消息。

來源

2013-07-16 Mesuti

在綁定時，即當您創建更改處理程序時，元素（select元素）不存在於DOM中（因爲它正在動態生成）。所以它不綁定change處理程序，因爲沒有要綁定的元素。因此，一個簡單的解決方案就是使用授權。現在，使用委託的美妙之處在於，不管元素何時創建，處理程序都被分配給元素。這應該對你有用。 PS：你應該嘗試使用代表團，只要你必須在旅途中（動態地）創建元素，你應該嘗試使用代表團。

來源

2013-07-16 20:45:57 user1

感謝您的回覆。我研究了jQuery中的bind-live-delegate並學習了一個新主題:) – Mesuti

如果這對你有幫助，你應該考慮點擊tick按鈕並將其標記爲答案。 :) – user1

這沒有解決我的問題，但想到了一個想法。我用「委託」功能解決了這個問題。 – Mesuti

使用jQuery級聯選擇框

回答

相關問題