Почему сериализуется значение из элемента выше по DOM, а не текущее?

Question

[AfterGen]

Есть пустой список...

<div id="pageContent">

            <h1>Choose your boots</h1>

            <div>
                <div id="selectionsPane">
                    <select id="bootChooserControl" name="style"></select>
                </div>

                <div id="productDetailPane"></div>
            </div>
        </div>

...в который ajax'ом подгружаются option'ы из fetchBootStyleOptions.php:

$(function() {
                $('#bootChooserControl').load('actions/fetchBootStyleOptions.php');

                $('#bootChooserControl').change(function(event){
                    $('#productDetailPane').load(
                        'actions/fetchProductDetails.php',
                        $(this).serialize()
                    );
                });
            });

Затем при изменении списка в элемент #productDetailPane подгружается соответствующий блок с инфой из fetchProductDetails.php. Все работает как надо. Но вопрос в том как это срабатывает.
Контекстом this становится #productDetailPane. Но сериализуется значение из #bootChooserControl... Почему так?

Answer 1

[Stalker_RED]

Потому что ваш $(this) ссылается именно на $('#bootChooserControl'), контекст не меняется, т.к. вы не создаете коллбэк функцию при вызове .load()
api.jquery.com/load

Comments

[AfterGen]

Ух ты, я просветился. Спасибо!