Дубликат JQuery UI проблема

Question

Я работаю над проектом Django. Но моя проблема на JQuery. Я использовал jquery.formset.js JQuery плагин для динамического добавления формы в inline_formsets, formset_factories. И это работает довольно хорошо. Он дублирует элементы первой строки с другими тегами оформления (такими как div, span, img ..) и добавляет новую строку в нижней части таблицы. Таким образом, дублированный ряд может отображаться так же, как и источник.

Я также использую jquery ui (datepicker, autocomplete..etc) в моих формах.

Дублирование копирует все, даже добавленные htmls от средств выбора даты и автозаполнения, потому что плагин старается не оставлять какие-либо части интерфейса. Когда клонируется первый ряд, клонируется все, даже клонируются события. Поэтому, когда я щелкаю по недавно появившемуся вводу datepicker, событие календаря работает с элементом первой строки.

Я пытаюсь найти решение. Вот что у меня на уме до сих пор ..

1. Объявите пользовательский интерфейс jquery (средство выбора даты и автозаполнение) как live ? как

   $ (". Date"). Live ('...', function () {$ (this) .datepicker ();})

   Но я не уверен, какое событие должно быть обработано для этого. Я думаю, что невозможно обрабатывать новые созданные или добавленные элементы.

2. Поместить скрипт в ряд? сразу после элемента

   $ ( "# Id_birthday_1") DatePicker ().

   Кажется, лучшая идея, но дублирование уже продублировало дополнительные элементы / htmls. Таким образом, он будет повторно визуализировать элемент.

3. Должен ли я редактировать плагин js? как связывание всех объявлений событий jquery ui, исключая рендеринг, добавление и стилизацию. Это было бы огромным беспорядком. Я не хочу так портиться ... И каждый раз, когда мне нужно добавить новый пользовательский интерфейс, я должен постоянно редактировать это js

Любые идеи будут оценены :) 1040 *

Answer 1

Ваша первая идея хорошая.

1. Дайте всем датировщикам класс, по которому можно их идентифицировать.
2. Клонируйте их всех.
3. Затем , превратите их в указатели даты, используя функцию jQuery each:

.

$(".dates").each(function (i) {
    $(this).datepicker();
}

Таким образом, в основном, скопируйте все элементы, прежде чем активировать на них средство выбора даты. each в jQuery позволяет активировать целый список элементов за один шаг.

Редактировать: Если вам нужно динамически генерировать новые клоны, вы можете сохранить HTML-код строки в переменной. Когда ваш пользователь добавляет строку, вы можете сделать что-то вроде:

$(".date", $(rowHTML).appendTo($("#my-form-fields"))).datepicker();

, который добавляет новую строку в форму, а затем инициализирует указатель даты этой строки.

Edit2: и приведенный выше код эквивалентен

$(rowHTML).appendTo($("#my-form-fields")).find(".date").datepicker();

Answer 2

Плагин formset может вызывать функцию при добавлении новой формы, вы можете инициализировать только что добавленные поля. Функция должна принимать один аргумент, row; ему будет передан объект jQuery, оборачивающий только что добавленную форму.

$('#myFormset1Table tbody tr').formset({
    added: function(row) {
       row.find(".date").datepicker(); 
    }
});

Answer 3

Вы можете слушать onSelect или, может быть, даже
$('.dates').focus(index){ $($('.dates')[index]) //etc. }