如何使用jQuery檢索動態添加的內容？

我的場景是這樣的：
當頁面被加載時，一個帶有國家的列表框被加載。如何使用jQuery檢索動態添加的內容？

通過從下拉列表中選擇一個項目，使用jQuery選擇列表框中的國家項目。

既然在列表框中選擇了一個國家，我會調用一個函數來檢索城市並填充城市列表框。

的代碼看起來是這樣的：

$('#MyDropDownList').change(function() { 
     (...) // Selected country is set here 

     populateCityListBox(); 

     //this alert is undefined. Probably because it's triggered before the callback in populateCityListBox() 
     alert(jQuery('#cityListBox option[value=Oslo]').val()); 
    }); 

    function populateCityListBox() 
    { 
    //Get ID for selected country 
    var ctryID = jQuery("select#countryListBox").val(); 

    jQuery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getCitiesByCountry', countryID: ctryID }, 
     function(data) 
     { 
      var options = ''; 
      for (var i = 0; i < data.length; i++) { 
      options += '<option value="' + data[i].city + '">' + data[i].city + '</option>'; 
      } 
      jQuery("select#cityListBox").html(options); 

      // This alerts the option text, which also is Oslo 
      alert(jQuery('#cityListBox option[value=Oslo]').val()); 
     }, "json"); 
    }

我的問題是這樣的：我不能我已運行功能populateCityListBox();後的城市列表框中檢索值。 I am能夠檢索$ .post回調中的值。

如何才能在觸發函數後檢索值？（我知道它必須做一些東西回調，而其他人運行「實時」......或類似的東西）。

來源

2010-01-14 Steven

你是對的。由於您的請求是異步，代碼將繼續運行。你可能替代的東西，像這樣：

$('#MyDropDownList').change(function() { 
     (...) // Selected country is set here 

     populateCityListBox(function() { 
      //this alert should work now 
      alert(jQuery('#cityListBox option[value=Oslo]').val()); 
     }); 


    }); 

    function populateCityListBox(callback) 
    { 
    //Get ID for selected country 
    var ctryID = jQuery("select#countryListBox").val(); 

    jQuery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getCitiesByCountry', countryID: ctryID }, 
     function(data) 
     { 
      var options = ''; 
      for (var i = 0; i < data.length; i++) { 
      options += '<option value="' + data[i].city + '">' + data[i].city + '</option>'; 
      } 
      jQuery("select#cityListBox").html(options); 

      // This alerts the option text, which also is Oslo 
      alert(jQuery('#cityListBox option[value=Oslo]').val()); 
      callback(); 
     }, "json"); 
    }

通過將callback爲populateCityListBox參數，我們可以打電話給你change那裏的內部的功能。實質上，它只是一種「修改」的回調類型：我們只是在回調中執行另一個函數。這使您可以像控制檯一樣在控制檯中獨立運行功能populateCityListBox，並且仍然可以使用應用程序邏輯或其他功能。

希望這會有所幫助。

來源

2010-01-14 00:48:55 Reid

humm ...我只是得到錯誤味精'回調沒有定義'。我猜我應該替換'callback（）;與其他一些代碼？ – Steven 2010-01-14 00:53:53

這是......奇怪。範圍有記憶;它應該有回調定義。由於'callback'是'populateCityListBox'上的一個參數，我們調用的'callback'在該函數內部（雖然是匿名的，但是很好），它應該可以工作。我唯一的猜測是你已經改變了應用程序的邏輯，並破壞了代碼。我的「模擬」對我來說很完美，所以我不確定問題是什麼。也許發佈更新的代碼或類似的東西可能是有用的，假設你可以自由地做到這一點。 – Reid 2010-01-14 02:38:48

好的。我還沒有完成，但它給了我一個關於如何解決它的好主意。所以我接受了答案。謝謝：） – Steven 2010-01-14 07:57:11

如何使用jQuery檢索動態添加的內容？

回答

相關問題