Как получить содержимое между тегами HTML, загруженными jQuery?

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

В каждой строке таблицы есть ссылка «выбрать», позволяющая пользователям выбрать строку из таблицы. Затем мне нужно взять информацию из этой строки и поместить ее в форму ниже по странице.

$('#selection_table').on('click', '.select_link', function() {
    $('#booking_address').text = $(this).closest('.address').text();
    $('#booking_rate').text = $(this).closest('.rate').val();
});

Насколько я понимаю, функция «ближайший» проходит вверх по дереву DOM, поэтому, поскольку моя ссылка находится в последней ячейке каждой строки, она должна получить элементы «адрес» и «скорость» из предыдущей строки (классы назначаются правильные ячейки).

Я пробовал отлаживать себя, используя быстрый и грязный 'alert($(this).closest(etc...') во многих вариантах, но, похоже, ничего не работает.

Нужно ли мне что-то делать по-другому для целевых данных, которые были загружены после загрузки исходной страницы? где я ошибаюсь?


jquery ajax dom-manipulation dom-traversal
person Anonymous    schedule 22.02.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы делаете неправильные предположения о .closest() и о том, как работает .text(). Возьмите за привычку изучать документацию, если сомневаетесь, она дает четкие описания и примеры того, как использовать функции jQuery.

  • .closest() будет проходить по родительским элементам данного элемента, пытаясь сопоставить предоставленный вами селектор. Если ваш .select_link не находится "внутри" .address, ваш код не будет работать.

  • Кроме того, .text() — это метод, а не свойство (в семантическом смысле, поскольку методы на самом деле являются свойствами в Javascript). x.text = 1; просто переопределяет метод этого элемента, что не очень хорошая идея, вы хотите вызвать метод: x.text(1);.

Что-то в этом роде может сработать:

var t = $(this).closest('tr').find('.address').text();
$('#booking_address').text(t);

Если #booking_address является элементом формы, используйте вместо него .val().

Если это не работает, предоставьте структуру HTML, которую вы используете (отредактируйте свой вопрос, используйте jsFiddle или аналогичный сервис), и я помогу вам. Задавая подобные вопросы, в любом случае рекомендуется предоставлять соответствующую структуру HTML.

person kapa    schedule 22.02.2013
comment
Спасибо большое, базмегакапа. Я играл с вашим примером, и он работает. :) Отметит как правильный через 3 минуты. - person Anonymous; 22.02.2013

arrow_upward
0
arrow_downward

Вы можете попробовать использовать функции parent() и find() и найти данные напрямую, количество методов parent() и find() зависит от вашего HTML.

Бывший. чтобы получить данные предыдущей строки, которые были бы

$('#selection_table').on('click', '.select_link', function(){ 
     $('#booking_address').text = $(this).parent().parent().prev().find('.address').text();
});

Где parent обозначает родительский элемент (tr), затем prev() в качестве предыдущей строки и find находит элемент.

person Glorious Kale    schedule 22.02.2013

arrow_upward
-1
arrow_downward

Где-то есть демо кода? Проверьте, когда вы вызываете код. Это должно быть после «успеха» вызова AJAX.

person Neeraj    schedule 22.02.2013