Блог

Я делаю выбор дерева категорий для категорий eBay.
У меня есть поле выбора…

 <div id="div_firstCat">
    <select id="slct_firstCat" name="slct_firstCat" size="33">
        <option value="353">Antiques</option>
        <option value="550">Art</option> ... and so on..
    </select>
</div>

<div id="div_secondCat"></div>
  

Я использую следующую функцию jQuery для отправки данных в мое PHP-приложение, которое вернет другое поле выбора в зависимости от того, какая выбрана первая категория (выше).

 // First Level Categories
    $("#slct_firstCat").change(function(){ // On change of slct_firstCat
    var actionRequested = "AJAX_getCats";  // My personal PHP Identifer
    var url = "index.php";                 // Post to index.php
    var catId = $("#slct_firstCat").val(); // Get the CatID from the select box.

    // Post this data to PHP and return the data into #div_secondCat
    $.post(url, {AJAX_Action: actionRequested, categoryId: catId, categoryLevel: 1},
        function(data){
            $("#div_secondCat").html(data);
           });
    // End of Function getCats
    });
  

PHP-файл возвращает это поле выбора, идентичное приведенному выше, но с другим именем.

 <select id="slct_secondCat" name="slct_secondCat" size="33">
        <option value="353">Sub-Cat of Antiques</option>
        <option value="550">Sub-Cat of Antiques</option> and so on..
</select>
  

Теперь, когда я пытаюсь получить значение параметра через jQuery из «slct_secondCat» (выбор, загруженный через AJAX), он не получает значение параметра, поэтому я не могу перемещаться дальше по дереву cat.

Это функция jQuery для публикации второй категории.

 // Second Level Categories
    $("#slct_secondCat").change(function(){
    var actionRequested = "AJAX_getCats";
    var url = "index.php";
    var catId = $("#slct_secondCat").val();

    $.post(url, {AJAX_Action: actionRequested, categoryId: catId, categoryLevel: 2},
        function(data){
            $("#div_thirdCat").html(data);
           });
    // End of Function getCats
    });
  

Когда я просматриваю исходный код страницы после загрузки данных AJAX, div_secondCat ничего не отображает внутри исходного кода, даже несмотря на то, что в div загружены данные, jQuery вернул данные из post в div и не обновил исходный код страницы.

Итак, в принципе, я получаю категории из моего PHP-файла через веб-сервис eBay, я хочу перейти к конечной категории, которую я хочу, и иметь возможность выбрать ее через jQuery.

Попробуйте

 // Second Level Categories
$("#slct_secondCat").live("change", function(){
  

Также: нажатие «Просмотреть исходный код страницы» покажет вам только исходный HTML-документ. Вам нужно проверить Firebug или Webkit Inspector, чтобы увидеть, что на самом деле происходит в DOM.

Когда я просматриваю исходный код страницы, после того, как AJAX загрузил данные

Если вы говорите о «просмотре источника» или подобном, это потому, что это покажет вам фактический источник страницы, а не представление о том, как сейчас выглядит DOM. Для этого вам нужен надлежащий отладчик. К счастью, они широко распространены и бесплатны.

Что касается того, почему вы не видите change событие: Когда вы запускаете свой код, чтобы подключить его? Поскольку эта строка:

 $("#slct_secondCat").change(...
  

…подключит обработчик, только если элемент уже существует. Если этого не происходит, обработчик не подключен. Вы можете либо вызвать эту функцию, чтобы подключить ее после завершения вашего предыдущего ajax-вызова, создающего элемент, либо использовать live (или еще лучше, delegate ).

 $("#slct_secondCat").live('change', ...
  

или

 $("#div_secondCat").delegate("#slct_secondCat", 'change', ...
  

(Обратите внимание, что в последнем мы используем div_secondCat в начальном селекторе, а затем вызываем delegate по нему.)