顯示下拉菜單時填充下拉列表？

Question

首先，我想說我對jQuery非常陌生，昨天剛剛開始，所以我對某些邏輯有些模糊，如果我不使用最佳實踐，請毫不猶豫地糾正我。

基本上就是我想要做的是：

• 我有幾個按鈕
• 當我點擊該按鈕中的一個，我會打開一個包含幾個元素一個div網頁（即不同根據按下的按鈕），在一些案件有，我想，當它的加載

我能正確處理按鈕和DIV裝載用Ajax來填充下拉列表

，但是我的下拉列表有點麻煩。我想在文檔中加載下拉列表時執行ajax調用，但我無法弄清楚如何做到這一點。

當我點擊按鈕，一個是創建HTML的一點點：

<div class='content'> 
    <select class='dropdown'></select> 
</div> 

這只是添加到文檔之後，我點擊了一個按鈕，它不存在擺在首位（基本上因爲不同的按鈕，將載入的內容DIV不同的東西）

我第一次在我的JS嘗試：

$('select.dropdown').load(function() { 
    alert('dropdown loaded'); 
}); 

這沒有工作，在所有的內華達州戒備呃出現了，無論我把這個小小的JS放在哪裏（我試圖在創建html之前先把它選中，我試着把它放在後面，不管我從來沒有得到警報）

所以我嘗試了ready函數：

$('select.dropdown').ready(function() { 
    alert('dropdown loaded'); 
}); 

而且工作。我用一個.post（）替換了警報，看起來像這樣：

$('select.dropdown').ready(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $('select.dropdown').append("html stuff with <option>"); 
    }); 
    }, 'json'); 

而且運行良好。但事實是，現在我要填充只解僱了。就緒（）事件選擇標籤，所以我試着用$（本）：

$('select.dropdown').ready(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("html stuff with <option>"); 
    }); 
    }, 'json'); 

並沒有奏效。如果我嘗試添加警報以查看「this」引用的內容：

$('select.dropdown').ready(function() { 
    alert($(this).attr('class')); 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("html stuff with <option>"); 
    }); 
    }, 'json'); 

我得到「undefined」。

所以基本上我的問題是：

• 爲什麼。就緒（）的作品，而不是.load（）？
• 如何在.ready（）函數中使用$（this）來引用啓動ready事件的下拉列表？

我想用$（本），而不是第一個解決方案的原因是因爲我會動態地添加其他下拉列表中，將使用相同的HTML標記和相同的JS代碼（如果可能的話），所以我有區分哪個下拉菜單啓動了準備好的事件。

有關如何做到這一點的任何想法/建議？

Answer 1

如果你不能在創建附加選項，另一個海報建議那麼也許你可以使用自定義事件：

$('#mybuttonid').click(function(){ 
    //load whatever here 
    $('select.dropdown').trigger('dropReady');//change selector to get right one 
}); 
$(document).on('dropReady','select.dropdown',function(){ 
    //do what you need 
}); 

注意嘗試使用的包裝，而不是記錄爲主播事件。

Answer 2

是否有任何特殊原因在繪畫之前無法填充下拉菜單？以這種方式鏈接事件會容易得多。這將是最簡單的選擇。

如果不成功，您可以在append或appendTo事件上使用.each回調函數在將下拉列表添加到DOM後填充下拉列表。您沒有提供該代碼片段，所以我對此進行了一些假設。

例子：

var content = $("<div class='content'>").appendTo(body); 

$("<select class='dropdown'></select>") 
.appendTo(content).each(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("<option>"); 
    }); 
    }); 
});