jQuery-克隆的日期选择器日历未出现在日期选择器字段旁边

Question

我创建了一个克隆的datepicker元素（在@Aamir Afridi的帮助下），现在我试图使日历与克隆的datepicker字段一起显示。

我在这里创建了一个jsfiddle来说明问题： http : //jsfiddle.net/dalepotter/xTvfx/3/

日历会显示随页面一起加载的元素的字段，但对于克隆的字段却无法正确定位-有人对如何解决此问题有任何指示吗？

非常感谢您提供的任何帮助...

这是代码：

HTML

    <h2>Action points</h2>

<table width="100%">
<tr><td width="50%" valign="top">

    <h3>For the Associate</h3>


    <div class="clone_Associate">

        <table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">


        <tr><td class="associate_column_left">
            Date set:</td><td class="associate_column_middle">
            <input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
        </td></tr>


        <tr><td class="associate_column_left">
            Date due for completion:</td><td class="associate_column_middle">
            <input type="text" name="DATE_DUE[]" class="datepick" value="">
        </td></tr>





        </table>

        <!-- End clone_Associate -->
        </div>
            <div class="placer_Associate"></div>
    <p><a href="#" class="clone_trigger_Associate">Add another action step for the Associate</a> &nbsp; </p>


</td><td width="50%" valign="top">


   <h3>For us</h3>


    <div class="clone_upReach">

        <table width="300" style="background-color:#EBEBEB; margin: 0 0 30px 0; padding: 5px;">


        <tr><td class="associate_column_left">
            Date set:</td><td class="associate_column_middle">
            <input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
        </td></tr>


        <tr><td class="associate_column_left">
            Date due for completion:</td><td class="associate_column_middle">
            <input type="text" name="DATE_DUE[]" class="datepick" value="">
        </td></tr>






        </table>
        <!-- End clone_upReach -->
        </div>

    <div class="placer_upReach"></div>
    <p><a href="#" class="clone_trigger_upReach">Add another action step for upReach</a> &nbsp; </p>

</td></tr> 
</table>
            <link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
                <script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js">  </script>

jQuery的

$('.datepick').datepick({ 
            dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});


        // Start code for duplicating a div box
        $(document).ready(function(){
            // Set datepicker options
            var options = {dateFormat: 'dd/mm/yy'}

          $(".clone_trigger_Associate").click(function () {
              // Prevent default link action
              event.preventDefault();

              $('input.cl:last').val('');
              var $newInput = $('.clone_Associate:last').clone(true).removeAttr('id');
              $(this).before($newInput);

              // Calculate correct number for the checkbox array
              var total = $('[name^="UPDATE_METHOD"]').length;
              var index = Math.round(total / 2) - 1;
              $('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]");

              // Reinitialise the datepicker
              $newInput.datepicker('destroy').datepicker(options);
            });
        });


        $(document).ready(function(){
            // Set datepicker options
            var options = {dateFormat: 'dd/mm/yy', showTrigger: '#calImg'}

            $(".clone_trigger_upReach").click(function () {
                // Prevent default link action
                event.preventDefault();

                $('input.cl:last').val('');
                var $newInput = $('.clone_upReach:last').clone(true).removeAttr('id');
                $(this).before($newInput);

                // Reinitialise the datepicker
                $newInput.datepicker('destroy').datepicker(options);
            });
        });

        // End code for duplicating a div box

Answer 1

您有两个问题：

1. 错字.datepicker()而不是.datepick()
2. $newInput.datepicker('destroy').datepicker(options);

应该

$newInput.find('.datepick').datepick('destroy').datepick(options);

因为您应该将datepicker附加到输入，而不是附加到div。

http://jsfiddle.net/xTvfx/4/