jQuery回調函數作用域

Question

當我使用jquery在回調函數中創建元素（例如div）時，它不允許我在回調函數之外操作新創建的元素，如何解決呢？

這是示例：

$.get('menu.xml',function(data){

//create a new element with an ID called "#newElement"

})

//I can't select the element outside the callback function so the following code dosen't work:

$('#newElement').css('background','black'); 

Answer 1

您可以在外部選擇它，但還沒有選擇 ，因為$.get()回調需要一些時間才能運行（它必須從服務器獲取數據，該回調會在完成時在稍后發生），所以在執行此操作時：

$('#newElement').css('background','black');

該元素現在還沒有 （這樣的選擇沒有找到任何東西......就這么回調之前創建它在運行），你需要等到回調持續，需要通過其創建的元素任何代碼之前完成。 像這樣：

$.get('menu.xml',function(data){
  //create a new element with an ID called "#newElement"
  //kick off stuff that uses "#newElement"
  $('#newElement').css('background','black'); 
});

Answer 2

$.get('menu.xml',function(data){
     //create a new element with an ID called ".newElement"

     $('<div/>').val(data).attr('id','newElement').css('background','black').append('#container');

})

嘗試修改回調中的元素，也嘗試使用類而不是id

Answer 3

從顯示的代碼來看，似乎您試圖在存在#newElement之前對其進行操作。 原因是在“ $ .get”的回調中創建了“ #newElement”。

重要的是要記住，JavaScript中的異步函數不會導致線程等待，這就是存在回調的原因。 因此，在執行$ .get的回調函數之前，您正在嘗試操縱#newElement。

例如，如果您將代碼調整為：

$.get('menu.xml',function(data){

    //create a new element with an ID called "#newElement"
    ....

    $('#newElement').css('background','black');
})

您會發現它有效。