Recurring jquery ui issue

Question

I am working on a Django project. But my problem is jQuery. I used jquery.formset.js JQuery plugin to dynamically add a form to inline_formsets, formset_factories. And it works pretty well. It duplicates the elements of the first row with other decoration tags (for example, div, span, img ..) and adds a new row at the bottom of the table. Thus, a duplicate row can be displayed in the same way as the source.

I also use jquery ui (datepicker, autocomplete..etc) in my forms.

Duplication copies everything, even added htmls using datepickers and autocompletes, because the plugin tries not to leave any fragments of the interface. When it clones the first row, everything is cloned, even cloning events. Therefore, when I click on the newly appeared date input, the calendar event works on the first line item.

I am trying to find a solution. Here is what I still think.

• Declare jquery ui (datepicker and autocomplete) as live ? as

  $ (". date"). live ('...', function () {$ (this) .datepicker ();})

  But I'm not sure which event needs to be handled for this. I believe that it is not possible to handle newly created or added elements.

• Script input inside string? immediately after the item

   $ ("# Id_birthday_1") DatePicker ().

  , , /htmls. , .

• js? jquery ui events, , . . . , ui, .

:)

Answer 1

formet , . , row; jQuery, .

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

Answer 2

- .

• , .
• .
• datepickers, jQuery each:

.

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

, , , datepicker . jQuery each .

: , HTML . , - :

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

, datepicker.

Edit2:,

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

Answer 3

You can listen onSelect or maybe even $('.dates').focus(index){ $($('.dates')[index]) //etc. }