Добавить индексированные поля ввода с прикрепленным виджетом DatePicker

Question

Я ищу наиболее эффективный способ добавить набор полей с виджетом DatePicker, прикрепленным к событию click. Итак, здесь у меня есть набор проиндексированных событий, генерируемых на странице:

<div id="events">
  <div class="event">
    <input type="text" id="event_0_startDate" name="event[0].startDate" class="date"/>
    <input type="hidden" id="event_0_startDate_day" name="event[0].startDate_day" />
    <input type="hidden" id="event_0_startDate_month" name="event[0].startDate_month" />
    <input type="hidden" id="event_0_startDate_year" name="event[0].startDate_year"/>
  </div>
  <div class="event">
    <input type="text" id="event_1_startDate" name="event[1].startDate" class="date"/>
    <input type="hidden" id="event_1_startDate_day" name="event[1].startDate_day" />
    <input type="hidden" id="event_1_startDate_month" name="event[1].startDate_month" />
    <input type="hidden" id="event_1_startDate_year" name="event[1].startDate_year" />
  </div>
.... more event divs ....

</div>

<a href="#" id="add_event">Add event</a>

.. с прикрепленным виджетом DatePicker:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        var prefix = $(this).attr('id');
        $('#' + prefix + '_month').val( dateText.split(/\//)[0] );
        $('#' + prefix + '_day').val( dateText.split(/\//)[1] );
        $('#' + prefix + '_year').val( dateText.split(/\//)[2] );
    }
});

Мне нужна функция, которая будет добавлять внутри div id = "events" после последнего div class = "event" еще один div class = "event", где N - следующий индекс, и прикреплять виджет datepicker выше к новому полю ввода class = "date" как:

<div class="event">
  <input type="text" id="event_N_startDate" name="event[N].startDate" class="date"/>
  <input type="hidden" id="event_N_startDate_day" name="event[N].startDate_day"/>
  <input type="hidden" id="event_N_startDate_month" name="event[N].startDate_month" />
  <input type="hidden" id="event_N_startDate_year" name="event[N].startDate_year" />
</div>

Спасибо.

Answer 1

Мне кажется, я понял :) 1001 *

  var idx = $("div.event").length;

  var wrapper = $('<div>').attr('class','event');

  addEventDate(wrapper, "startDate", idx);

  wrapper.insertAfter("div.event:last");

  function addEventDate(wrapper, prefix, idx) {

        $('<input>').attr({
            name: 'event[' + idx + '].' + prefix',
            id: 'event' + idx + '_' + prefix',
            type: 'text',
            'class': 'date'
        }).appendTo(wrapper);


        $('<input>').attr({
            name: 'event[' + idx + '].' + prefix + '_day',
            id: 'event' + idx + '_' + prefix + '_day',
            type: 'hidden',
            value: ''
        }).appendTo(wrapper);

        $('<input>').attr({
            name: 'event[' + idx + '].' + prefix + '_month',
            id: 'event' + idx + '_' + prefix + '_month',
            type: 'hidden',
            value: ''
        }).appendTo(wrapper);

        $('<input>').attr({
            name: 'event[' + idx + '].' + prefix + '_year',
            id: 'event' + idx + '_' + prefix + '_year',
            type: 'hidden',
            value: ''
        }).appendTo(wrapper);
    }