Question

我有一个div，可以填充3种不同的布局来输入日期和时间。

这是由其中一个布局加载的html：

 <div class="row clearfix input-field">
  <div class="span10 date-selection">
    <div class="input-prepend date-time">
     <input class="date-input" name="date" size="16" type="text" value="">
    </div>
    <div class="input-prepend date-time">
     <input class="time-input" name="time" size="16" type="text" value="">
    </div>
  </div>
 </div>

然后我使用live来管理这样的监听器

$('.date-input').live 'click', (e) ->
    $(this).datepicker({showOn:'focus'}).focus()
$('.time-input').live 'click', (e) ->
  $(this).timepicker({showOn:'focus'}).focus()

这很好但我也有一个链接来创建一组新的日期和时间字段。

$(".add-lesson").live 'click', (e) ->
    e.preventDefault()
    lesson = $('.multiple-lessons .row:first').clone()
    $(".multiple-lessons .row:last").after(lesson)
    $(".multiple-lessons .row:last input.date-input").attr('name', 'date2')
    $(".multiple-lessons .row:last input.date-input").attr('id', 'new-date-id')
    $(".multiple-lessons .row:last input.time-input").attr('name', 'time2')
    $(".multiple-lessons .row:last input.time-input").attr('id', 'new-time-id')

在最终的代码中，我将生成更好的名称，这些名称对于保存在rails中是有效的，因此上面的名称和ID仅用于测试。

问题

采摘者使用原始的实时元素，但不使用克隆的元素。奇怪的是，如果我不使用选择器并使用克隆添加大量新行，则所有克隆的行都可以使用选择器。

我正在使用最新的jQuery和jQuery ui

有什么想法吗？

Answer 1

克隆的重载版本就像 -

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

您可以使用.bind() as，

正常绑定事件

 $('.date-input').bind 'click', (e) ->
    $(this).datepicker({showOn:'focus'}).focus()
$('.time-input').bind 'click', (e) ->
    $(this).timepicker({showOn:'focus'}).focus()

然后使用.clone(true, true) as，

lesson = $('.multiple-lessons .row:first').clone(true, true)

我认为这将解决问题。

Answer 2

我无法从@pawar获得解决方案，所以我使用这个hack直到找到更好的解决方案。

$('.date-input').datepicker('destroy')
$('.date-input').datepicker()

Answer 3

以下是完全有效的解决方案：

    $(function(){
    var counter = 0;
        $(".add-lesson").live( 'click', function (e) {
            e.preventDefault()
            lesson = $('.multiple-lessons .row:first').clone(false, false);

            $("input.date-input",lesson).attr('name', 'date2'+counter);
            $("input.date-input",lesson).attr('id', 'new-date-id'+counter);
            $("input.time-input",lesson).attr('name', 'time2'+counter);
            $("input.time-input",lesson).attr('id', 'new-time-id'+counter);
            $(".multiple-lessons .row:last").after(lesson);
            $('.multiple-lessons .row:last #new-date-id'+counter)
                .datepicker({showOn:'focus'});
            $('.multiple-lessons .row:last #new-time-id'+counter)
                .timepicker({showOn:'focus'});
            counter++;
        });

        $('.date-input').click(function(){
            $(this).datepicker({showOn:'focus'});
        });
        $('.time-input').click(function(){
            $(this).timepicker({showOn:'focus'});
        });

    });

<div class="multiple-lessons">
 <div class="row clearfix input-field">
     <div class="span10 date-selection">
     <div class="input-prepend date-time">
         <input class="date-input"  size="16" type="text" value=""></input>
     </div>
     <div class="input-prepend date-time">
         <input class="time-input"  size="16" type="text" value=""></input>
     </div>
     </div>
 </div>
</div>

Answer 4

当datepicker附加到输入时，会在输入中添加一个特殊的类“hasDatepicker”，告诉插件该输入已经附加了一个datepicker。从克隆的输入中删除该类，然后datepicker将在调用时正确绑定它们。

类似的东西：

lesson = $('.multiple-lessons .row:first').clone().removeClass('hasDatepicker');

jQuery - 在页面加载后插入的元素上无法激活datepicker

4 个答案: