jquery回调函数作用域答案

【问题标题】：jquery callback function scopejquery回调函数作用域
【发布时间】：2011-03-10 14:38:18
【问题描述】：

当我使用 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');

【问题讨论】：

感谢大家的回答，大家的问题都回答的很清楚很好，希望有一天我能贡献一点。

标签： javascript jquery scope callback

【解决方案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'); 
});

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

从您显示的代码来看，您似乎试图在“#newElement”存在之前对其进行操作。原因是 '#newElement' 是在 '$.get' 的回调中创建的。

重要的是要记住，javascript 中的异步函数不会导致线程等待，这就是存在回调的原因。因此，在执行“$.get”的回调函数之前，您正在尝试操作“#newElement”。

例如，如果您将代码调整为：

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

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

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

你会发现它有效。

【讨论】：