多次添加 datepicker 事件处理程序

Question

我正在尝试使用 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>

添加一个新盒子有效。 在新框中添加删除框事件处理程序有效。 使用新框添加 datepicker 事件处理程序不起作用。我不明白为什么... 使用 $().clone() 创建新元素 新元素会继承旧元素的事件处理程序吗？如果是这样，可能是我的问题是将 datepicker 事件处理程序多次添加到同一个元素......我的想法不多了

Answer 1

你必须使用

$().clone(true)

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

withDataAndEvents 一个布尔值，指示是否应将事件处理程序与元素一起复制。从 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() 之前的状态

Answer 2

为了将事件绑定到动态创建或克隆的元素，请使用 .on()

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

Demo