Html код, сгенерированный JQuery не доступен

Question

у меня была головная боль отладки следующий код:

Презентация

Если я запускаю следующий код:

$.get('/api/Customer/1', function(data){ 
    projects = data.data.projects; 
    var $el = $('#mySelect'); 
    $el.empty(); 
    projects.forEach(function(element, index, array){ 
     var text = element.name; 
     addSelectOption("mySelect", element.idProject, text); 
    }); 
}); 

/** 
* Function which add an option to the select input which id is idSelect. 
*/ 
function addSelectOption(idSelect, value, text) 
{ 
    var option = 
      $('<option></option>').attr("value", value).text(text); 
    $('#' + idSelect).append(option); 
} 

Мой выбор будет выглядеть следующим образом:

<select id="mySelect"> 
    <option value="1">proj1</option> 
    <option value="2">proj2</option> 
    <option value="3">proj3</option> 
    <option value="4">proj4</option> 
</select> 

Отказ

Итак, если я добавляю следующую строку после моего АЯКС код:

$('#mySelect').val("2"); 

Мой выбор должен отображать proj2. Но это не так.

Успех

Единственный способ я нашел, чтобы сделать его работы следующий код:

$.get('/api/Customer/1', function(data){ 
    projects = data.data.projects; 
    var $el = $('#mySelect'); 
    $el.empty(); 
    projects.forEach(function(element, index, array){ 
     var text = element.name; 
     addSelectOption("mySelect", element.idProject, text); 
    }); 
    $('#mySelect').val("2");//the only change between the presentation code 
}); 

Похоже, что HTML, порожденного JQuery имеет область, которая является запрос прибудете Аякса.

Вопрос

Я не понимаю, почему первый код не установить выбранное значение mySelect для proj2. Вы можете объяснить это мне, пожалуйста?

Answer 1

Это потому, что запрос ajax является асинхронным. Параметр со значением 2 не создается, когда вы задаете функцию val() для ее установки. Когда вы помещаете его в ajax, функция обратного вызова доступна и устанавливается правильно.

Answer 2

В дополнение к тому, что сказал @SSA, вот как вы можете решить эту проблему с помощью обратного вызова:

$.get('/api/Customer/1', function(data){ 
    projects = data.data.projects; 
    var $el = $('#mySelect'); 
    $el.empty(); 
    projects.forEach(function(element, index, array){ 
     var text = element.name; 
     addSelectOption("mySelect", element.idProject, text); 
    }); 
}).done(function(){ // <- Called when the $.get is completed 
    $('#mySelect').val("2"); 
}); 

Или вы можете просто сделать операцию внутри обратного вызова $.get успеха вместе с другим кодом.