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');
})

您会发现它有效。