Question

当用户点击一个文本字段时，我在 jQuery UI 中使用此jQuery函数生成 datepicker ：

<script>
        $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
  </script>

正如您所看到的，它会从和到对文本域做出响应。文本字段在我的html代码中，如：

<div class="clearfix"> <label for="from">From</label> <input type="text" id="from" name="from" class="xlarge"/> </div> <div class="clearfix"> <label for="to">to</label>

此时一切正常。稍后，以相同的形式让用户使用其他代码克隆此表单元素：

$(document).ready(function() { var removeButton = '<a href="#" id="remove">remove</a>'; $('#addl').click(function() { $('div.jobitems:last').after($('div.jobitems:first').clone()); $('div.jobitems:last').append(removeButton); $('div.jobitems:last input').each(function(){ this.value = ''; }); }); $('#remove').live('click', function() { $(this).closest('div.jobitems').remove(); }); }); <input type="text" id="to" name="to" class="xlarge"/> </div>

当用户克隆元素时，新元素不响应生成datepicker的函数。我真的很困惑。 您可以在此检查正在运行的代码： http://domingo.net46.net/example/reg.php

Answer 1

你必须在追加html元素之后调用使数据加工器再次发生的函数，以便日期选择器对它们起作用，因为我可以看到在文档就绪时调用了datepicker函数，你还有另一个附加函数html元素，所以你必须在追加html elemnt之后立即调用datepicker函数。

$(DoAction);

function DoAction() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    }




$(document).ready(function() {
    var removeButton = '<a href="#" id="remove">remove</a>';
        $('#addl').click(function() {
        $('div.jobitems:last').after($('div.jobitems:first').clone());
        $('div.jobitems:last').append(removeButton);
         $('div.jobitems:last input').each(function(){
           this.value = ''; 
        });
            DoAction();

    });
    $('#remove').live('click', function() {
        $(this).closest('div.jobitems').remove();
    });
  });

Answer 2

问题可能如下：

this.value = '';

尝试将其更改为：

$(this).value = '';

然后它应该工作，因为它正在创建一个jQuery对象

Answer 3

如果克隆的元素与原始元素具有相同的id，那么我不会惊讶于日期选择器只会对它找到的第一个元素起作用。

Jquery函数不适用于动态生成的表单组件？

3 个答案: