多次添加datepicker事件处理程序

使用jQuery我试图将datepicker事件处理程序添加到输入元素。多次添加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（）是否继承旧元素的事件处理程序？如果是这样，可能是我的问题被多次添加日期选择器事件处理程序相同的元素...我运行的想法

来源

2012-03-14 esviko

，你必须使用

$().clone(true)

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

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()

来源

2012-03-14 12:40:08 StilgarBF

代表团比克隆更有用。检查我的答案:) – Starx 2012-03-14 13:25:07

他询问克隆和绑定事件。这就是我所关注的。你指出正确的是，有更好的方法来解决这个问题。 – StilgarBF 2012-03-14 14:14:55

Thanx StilgarBF！参数'真'解决了我的问题。但是如果我不想复制事件处理程序呢？如果我想添加新的事件处理程序，该怎么办？特别是datepicker ... datepicker [demo]（http://jsfiddle.net/XVHqJ/）不起作用...任何想法为什么？ – esviko 2012-03-14 15:40:50

为了将事件动态创建或复制的元素使用绑定状态。对（）

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

Demo

来源

2012-03-14 12:49:57 Starx

Thanx Starx！在使用.on（）方法时，我不必在$（'。add-box'）内执行额外的$（'。remove-box'）。click（）。click（function（）{}）。但是，这仍然无法解释为什么datepicker不工作...请参阅[demo]（http://jsfiddle.net/XVHqJ/） – esviko 2012-03-14 15:49:03

@esviko，克隆时，活页夹不起作用，将true参数传递给' .clone（）'方法。查看演示[这里]（http://jsfiddle.net/Starx/XVHqJ/1/） – Starx 2012-03-14 16:31:20

多次添加datepicker事件处理程序

回答

相关问题