Добавление обработчика событий datepicker несколько раз - PullRequest
Новая
       63

Добавление обработчика событий datepicker несколько раз

0 голосов
/ 14 марта 2012

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

    <div id="Box_tmpl" style="border:solid 1px #777; background:#ddd; display: none;">
        <a class="remove-box" href="#">remove</a>
        <div>
            <label for="PeriodStart">Period (start):</label>
            <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" />
        </div>
        <div>
            <label for="PeriodEnd">Period (end):</label>
            <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" />
        </div>
    </div>

    <a class="add-box" href="#" style="margin: 6px 0 10px auto;">add</a>

    <div id="Boxes">
        <div style="border:solid 1px #777; background:#ddd;">
            <a class="remove-box" href="#">remove</a>
            <div>
                <label for="PeriodStart">Period (start):</label>
                <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" />
            </div>
            <div>
                <label for="PeriodEnd">Period (end):</label>
                <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });

            $('.remove-box').click(function(){
                $(this).parent().remove();
            });

            $('.add-box').click(function(){
                $('#Box_tmpl').clone().removeAttr('id').show().appendTo('#Boxes');
                $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });
                $('.remove-box').click(function(){
                    $(this).parent().remove();
                });
                return false;
            });
        });
    </script>

Добавление новой коробки работает. Добавление обработчика события remove-box в новое окно работает. Добавление обработчика событий datepicker в новом окне НЕ работает. Я не понимаю почему ... Создание нового элемента с использованием $ (). Clone () наследует ли новый элемент обработчики событий старого элемента? Если это так, возможно, моя проблема заключается в добавлении обработчика событий datepicker несколько раз к одному элементу ... У меня заканчиваются идеи

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Чтобы связать событие с динамически созданными или клонированными элементами, используйте .on () 

$('#Boxes').on('click', '.remove-box', function(){
   $(this).parent().remove();
});

Демо

1 голос
/ 14 марта 2012

Вы должны использовать 

$().clone(true)

http://api.jquery.com/clone/

withDataAndEventsA Логическое значение, указывающее, следует ли копировать обработчики событий вместе с элементами.Начиная с jQuery 1.4, данные элемента также будут скопированы.

для вашего вопроса в комментарии: при инициализации средство выбора даты добавляет класс "hasDatepicker" к входным данным.Вы не можете повторно инициализировать Input с этим классом, поэтому, если вы не хотите клонировать события, вам нужно .removeClass('hasDatepicker') из вашего клонированного ввода, а затем инициализировать его.

код в скрипте должен быть изменен: 

$('#Box_tmpl').clone().removeAttr('id').find('input.start-end-date').removeClass('hasDatepicker').end().show().appendTo('#Boxes');
$('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });

примечание: .end() перематывает в прежнее состояние до find()

...