#jquery
#jquery
Вопрос:
Я делаю выбор дерева категорий для категорий 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.
Ответ №1:
Попробуйте
// Second Level Categories
$("#slct_secondCat").live("change", function(){
Также: нажатие «Просмотреть исходный код страницы» покажет вам только исходный HTML-документ. Вам нужно проверить Firebug или Webkit Inspector, чтобы увидеть, что на самом деле происходит в DOM.
Комментарии:
1. Потрясающе. Рад, что вы запущены. Приветствия.
Ответ №2:
Когда я просматриваю исходный код страницы, после того, как AJAX загрузил данные
Если вы говорите о «просмотре источника» или подобном, это потому, что это покажет вам фактический источник страницы, а не представление о том, как сейчас выглядит DOM. Для этого вам нужен надлежащий отладчик. К счастью, они широко распространены и бесплатны.
Что касается того, почему вы не видите change
событие: Когда вы запускаете свой код, чтобы подключить его? Поскольку эта строка:
$("#slct_secondCat").change(...
…подключит обработчик, только если элемент уже существует. Если этого не происходит, обработчик не подключен. Вы можете либо вызвать эту функцию, чтобы подключить ее после завершения вашего предыдущего ajax-вызова, создающего элемент, либо использовать live
(или еще лучше, delegate
).
$("#slct_secondCat").live('change', ...
или
$("#div_secondCat").delegate("#slct_secondCat", 'change', ...
(Обратите внимание, что в последнем мы используем div_secondCat
в начальном селекторе, а затем вызываем delegate
по нему.)