Проблема Dom в запросе AJAX

Question

Я застрял на этой проблеме почти 2 дня, рассмотрим следующий код:

«Выбор страны» встречается дважды в форме (ввод), * ​​1003 *

$('.branch-row').hide();
$('.country-select').change(function(){
    console.log($(this));
    country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + $("'#" + country_select.attr('id') + " option:selected'").val() + '&field=' + $(':input:eq('+($(":input").index(country_select) + 1) +')').attr('name'),
        function(html){
            $(':input:eq('+($(":input").index(country_select) + 1) +')').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();
//debug 2
console.log(country_select);

выходные данные отладки 1 являются одним и тем же объектом:

[выберите # платит-dem.country-выбор] [Выберите # платит-dem.country-выберите]

однако вывод отладки 2 правильный:

[выберите # Pays-enlev.country-выбор] [Выберите # платит-dem.country-выберите]

Похоже, проблема заключается в функции $ .get () AJAX и объекте country_select. Есть идеи, что происходит в wtf?

Answer 1

Не помещая var перед переменной country_select, он привязывается к глобальному пространству, а не к локальной функции. Кроме того, я не думаю, что вам нужно запрашивать, чтобы получить выбранное значение выбора. Использование val() должно быть достаточно. Я бы попытался упростить выбор того, что я считаю следующим входом после выбора. Попробуйте что-то вроде этого:

$('.country-select').change(function(){
    console.log($(this));
    var country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + country_select.val() + '&field=' + country_select.next('input:first').attr('name'),
        function(html){
            country_select.next('input:first').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();

Кстати, это нарушит console.log после функции, поскольку переменная больше не находится в глобальной области видимости.

Answer 2

Просто хотел добавить некоторые детали в мой ответ выше.

Всякий раз, когда вы используете переменную в JavaScript, не объявляя ее в области действия функции (используя ключевое слово var), она добавляется в область глобального окна.

Таким образом, следующее будет справедливо

function myFunction(){
i=99;
if(i==99 && window.i == i){
alert("It went into global scope");
}
} 

myFunction();
if(i==99 && window.i == i){
alert("Same here");
}

Answer 3

Вам нужно поместить переменную перед country_select, чтобы сделать ее локальной переменной. В настоящее время его определяют в глобальном масштабе.

Как только вы это сделаете, вы не сможете выполнить второй файл console.log, так как в этот момент переменная будет вне области видимости.