Те же идентификаторы на вкладках jQuery

Question

Я использую библиотеку jQuery Tabs в небольшом приложении.Страница имеет 5 вкладок, и содержимое для каждой страницы загружается с помощью Ajax.Проблема заключается в том, что после загрузки вкладки она остается в памяти браузера (как и ее элементы HTML).Поэтому, если я использую, скажем, элемент DIV с тем же идентификатором, что и у ранее загруженной вкладки, все функции JS, связанные с этим идентификатором, пытаются взаимодействовать со старой вкладкой.

Другими словами, допустим, у меня есть страницас 2 вкладками: «Данные трафика1», «Данные трафика2».Теперь сначала я нажимаю на вкладку Traffic Data1, которая выполняет вызов ajax и загружает страницу просто отлично.Эта страница имеет 2 поля ввода даты, идентификатор для первого поля - "dateFrom", а другое поле - "dateTo".Рядом с этим есть кнопка «Перейти».После нажатия кнопки функция JS отображает окно предупреждения со значениями в каждом из полей ввода.

Теперь я нажимаю на вкладку «Данные трафика2».Содержимое страницы сильно отличается, но имеет одинаковые поля ввода, 2 для дат (с одинаковыми идентификаторами) и кнопку «Перейти».Когда я нажимаю кнопку «Перейти» на этой странице, я вижу окно предупреждения со значениями из предыдущей вкладки.

Итак, мой вопрос: есть ли способ выгрузить предыдущую вкладку?Или это единственная альтернатива для использования элементов с уникальными элементами div (хотя страницы полностью разделены).

Спасибо

Answer 1

Вы не можете иметь несколько элементов с одинаковым идентификатором. Когда вы находите элемент по идентификатору, первый найденный всегда возвращается, поскольку ожидается, что идентификаторы будут уникальными.

Оставьте атрибуты name для элементов ввода одинаковыми, но измените их идентификаторы на уникальные.

Вы можете выбрать элемент по его атрибуту name следующим образом: $('[name="foobar"]')

Обновление

В документах для вкладок пользовательского интерфейса jQuery есть параметр под названием cache, который при установке на false должен удалять старые вкладки из DOM после перехода от них:

Кешировать или нет содержимое удаленных вкладок, например загрузить только один раз или с каждым кликом. Кэшированный контент загружается лениво, например, один раз и только один раз за первый клик. Обратите внимание, что для предотвращения фактического Ajax запросы от кеширования браузером вам нужно предоставить дополнительную кеш: ложный флаг для ajaxOptions.

Источник: http://jqueryui.com/demos/tabs/

Answer 2

Вы ищете jQuery Live .

Описание: Присоединить обработчик событий для всех элементов, соответствующих текущему селектору, сейчас и в будущем.

Если вы используете его, jQuery волшебным образом автоматически обновится, чтобы соответствовать вашим новым элементам, когда они появляются / исчезают.

// code sample
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); 

Answer 3

Поскольку событие нажатия вкладок перезагружает вашу форму и, если вы используете div для хранения содержимого, загруженного ajax, добавьте .click(function () { $(this).children('div').children.remove(); }) в ваше объявление tabs().

Это должно удалить содержимое div и все связанные с ним обработчики событий.

Answer 4

Если вы можете передать контекст функциям jquery, вы можете сделать вызовы относительно текущей выбранной вкладки ...

$("#someDuplicatedId", activeTab).doStuff();

Или, если кеширование контента не важно, ответьте на вопрос Джаспера.