jquery callback function scope

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

}) 

Попробуйте изменить элемент в функцию обратного вызова, а также попробовать использовать класс вместо идентификатора

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

Вы увидите, что это работает.