2013-07-16 67 views
0

我想與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); 
}); 

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

回答

1

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

+0

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

+0

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

+0

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