Лучший способ справиться с несколькими вкладками с одинаковым содержимым

Question

Я использую вкладки jQuery (из этого примера: http://jqueryui.com/demos/tabs/#manipulation)), и я настроил его так, чтобы каждая созданная вкладка извлекала одни и те же данные, чтобы позволить пользователям вводить несколько записей одного типа (т.е. пользователи могут вводить несколько курсов.) После того, как они завершили ввод своих курсов на этих разных вкладках, как я могу нажать Сохранить и отправить данные на другую страницу, чтобы добавить их в базу данных.

Содержимое вкладки имеет jQuery / JS, и когда я начинаю добавлять более 1 вкладки, функциональность нарушается - я предполагаю, что это из-за одинаковых имен переменных? Каков наилучший способ избежать этого? Изменяя .click (function () {события в jQuery на .live ('click', function () {?

Тогда, когда дело доходит до размещения данных формы на другой странице, чтобы добавить их в базу данных, как бы вы зациклились на них? Будут ли в полях идентификаторы?

Answer 1

Проверьте количество вкладок и идентификаторов текстовых полей имени соответственно (txtCourse1, txtCourse2 ...). Вы можете получить вкладки с панелями контента:

$(".ui-widget-content").each(function (){
   $(this).find("input")....
});

Answer 2

Здесь есть несколько возможностей, и вам будет сложно дать точные и исчерпывающие советы без примера кода. Тем не менее:

1. На странице может быть только один идентификатор. Даже если ваши вкладки «скрыты», их содержимое является частью DOM. Если вы дублируете атрибуты идентификатора, у вас недопустимая разметка, и JavaScript не сможет нацелить их должным образом.

2. Если вы используете классы, селектор jQuery вернет массив объектов. В некоторых случаях (это зависит от функции), последующие функции будут действовать только на первый член массива, а не на все члены.

3. Если новый контент возвращается через Ajax, вам действительно нужно переключиться на делегированного слушателя вместо использования .click(). Вы упомянули .live(), но для jQuery 1.7+ это устарело; Вы должны использовать .on() с синтаксисом делегирования. Документация по API расскажет вам, как использовать .on() для замены .live() на $(document).on(), но вам лучше выбрать более близкого предка ... $('#someContainer').on('click', '.target', function() {});, где #someContainer и .target являются лишь примерами ... выберите контейнерный селектор, который никогда не будет уничтожен, и действительный целевой селектор.