使用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事件处理程序添加到同一个元素...我的想法已经用完了
答案 0 :(得分:1)
你必须使用
$().clone(true)
withDataAndEventsA布尔值,指示是否应将事件处理程序与元素一起复制。从jQuery 1.4开始,元素数据也将被复制。
注释中的问题:初始化时,datepicker会在输入中添加一个“hasDatepicker”类。你不能重新初始化该类的输入,
因此,如果您不想克隆事件,则必须从克隆的输入中.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()
答案 1 :(得分:1)
为了将事件绑定到动态创建或克隆的元素,请使用.on()
$('#Boxes').on('click', '.remove-box', function(){
$(this).parent().remove();
});