克隆div jQuery UI Datepicker问题(Clone div jQuery UI Datepicker issue)

我有一个包含几个字段的div，可以克隆到另一个div中。其中一个字段使用datepicker ui。但是，当我去克隆div时，datepicker停止为克隆输入工作。我已经使用并编辑了以下问题，但没有运气

HTML：

<div class="add-child"> <input type="text" class="child_dob" name="child_dob" id="child_dob" /> </div> <button type="button" id="add_child">Add another child</button>

jQuery的：

/* CLONE CODE */ $(function() { $('#add_child').click( function(){ var clone = $('.add-child:first').clone(); clone.appendTo('#child'); $(":input").each(function (i) { $(this).attr('tabindex', i + 1); }); }); });

我真的无法理解我哪里出错了。任何帮助将不胜感激

编辑：

HTML：

<table class="portrait-table add-child"> <tr> <th colspan="6"><strong>Children details</strong></th> </tr> <tr> <th>Name</th><td><input type="text" class="child_name" name="child_name" value="<?php echo set_value('child_name'); ?>" /></td><td><?php echo form_error('child_name') ?></td> </tr> <tr> <th>Relationship to you</td> <td><select class="child_relation" name="child_relation"> <option value="Son">Son</option> <option value="Daughter">Daughter</option> <option value="Other">Other</option> </select> </td> <td><?php echo form_error('child_relation') ?></td> </tr> <tr> <th>Age</th><td><input type="text" class="child_age" name="child_age" value="<?php echo set_value('child_age'); ?>" /></td><td><?php echo form_error('child_age') ?></td> </tr> <tr> <th>DoB</th><td><input type="text" class="child_dob" name="child_dob" value="<?php echo set_value('child_dob'); ?>" /></td><td><?php echo form_error('child_dob') ?></td> </tr> <tr> <th>Gender</th> <td><select class="child_gender" name="child_gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><?php echo form_error('child_gender') ?></td> </tr> <tr> <th>Ethnicity</th> <td><select class="child_ethnicity" name="child_ethnicity"> <option>Ethnicity</option> <option value="White British">White British</option> <option value="White Irish">White Irish</option> <option value="Traveller">Traveller</option> <option value="Gypsy/Roma">Gypsy/Roma</option> <option value="Any other White Background">Any other White Background</option> <option value="Black Caribbean">Black Caribbean</option> <option value="Black African">Black African</option> <option value="Any other Black Background">Any other Black Background</option> <option value="Indian">Indian</option> <option value="Bangladeshi">Bangladeshi</option> <option value="Chinese">Chinese</option> <option value="Mixed Background">Mixed Background</option> <option value="Any other Asian Background">Any other Asian Background</option> <option value="Any Other Ethnic Group">Any Other Ethnic Group</option> <option value="Not given">Not given</option> </select> </td> <td><?php echo form_error('child_ethnicity') ?></td> </tr> <tr> <th>School</th> <td> <select class="child_school" name="child_school"> <option value="Southwick Community Primary School">Southwick Community Primary School</option> <option value="Valley Road Community Primary School">Valley Road Community Primary School</option> <option value="Diamond Hall Junior School">Diamond Hall Junior School</option> <option value="Highfield Primary School">Highfield Primary School</option> <option value="Usworth Colliery Primary School">Usworth Colliery Primary School</option> <option value="Hetton Primary School">Hetton Primary School</option> <option value="Hetton Lyons Primary School">Hetton Lyons Primary School</option> <option value="Other">Other</option> <option value="N/A">N/A</option> </select> </td> <td><?php echo form_error('child_school') ?></td> </tr> </table> <div id="child"></div> <p><button type="button" id="add_child">Add another child</button></p>

jQuery（我需要每个字段名称附加_additional）：

$(function() { $('#add_child').click( function(){ var clone = $('.add-child:first').clone(true).appendTo('#child'); clone.find("input").val(""); clone.find(".child_name").attr('name', 'child_name_additional[]'); clone.find(".child_relation").attr('name', 'child_relation_additional[]'); clone.find(".child_age").attr('name', 'child_age_additional[]'); clone.find(".child_dob").attr('name', 'child_dob_additional[]'); clone.find(".child_gender").attr('name', 'child_gender_additional[]'); clone.find(".child_ethnicity").attr('name', 'child_ethnicity_additional[]'); clone.find(".child_school").attr('name', 'child_school_additional[]'); $(":input").each(function (i) { $(this).attr('tabindex', i + 1); }); });

}）;

I have a div containing a few fields that can be cloned into another div. One of those fields use the datepicker ui. However, when I go to clone the div the datepicker stops working for the cloned input. I have used and edited the following from this question but no luck

HTML:

<div class="add-child"> <input type="text" class="child_dob" name="child_dob" id="child_dob" /> </div> <button type="button" id="add_child">Add another child</button>

jQuery:

I really cannot understand where I am going wrong with it. Any help would be greatly appreciated

EDIT:

HTML:

jQuery (I need each field name to be appended with _additional):

});

最满意答案

您可以看一些事情：

看起来你的第二个代码块在$(document).ready(function()) 。 var myDiv是你的按钮，它没有孩子。克隆输入后，您将获得重复的child_dob id。

至于让datepicker在克隆输入上工作，这应该可以解决问题：

$('#add_child').click(function() { var clone = $('.add-child:first').clone(true).appendTo('#child'); clone.find('.child_dob').datepicker(); });

这是一个简化的例子

编辑

我了解你现在的问题是你添加了完整的代码。在您的问题中，您没有提到您已将datepicker .child_dob分配给原始.child_dob 。它有点乱，但您需要从克隆元素中删除datepicker ，然后再次添加：

替换线：

clone.find(".child_dob").attr('name', 'child_dob_additional[]');

附：

clone.find(".child_dob").removeClass('hasDatepicker').removeAttr('id') .datepicker().attr('name', 'child_dob_additional[]');

这是另一个小提琴

A few things for you to look at:

It looks as if your second block of code is outside of the $(document).ready(function()). var myDiv is your button, it has no children. When your input is cloned, you get duplicate child_dob id's.

As for getting the datepicker to work on the cloned input, this should do the trick:

$('#add_child').click(function() { var clone = $('.add-child:first').clone(true).appendTo('#child'); clone.find('.child_dob').datepicker(); });

Here's a simplified example fiddle

EDIT

I understand what your problem is now that you've added the full code. In your question you don't mention that you have a datepicker already assigned to the original .child_dob. It's a little bit messy, but you need to remove the datepicker from the cloned element, and then add it again:

Replace the line:

clone.find(".child_dob").attr('name', 'child_dob_additional[]');

With:

clone.find(".child_dob").removeClass('hasDatepicker').removeAttr('id') .datepicker().attr('name', 'child_dob_additional[]');

Here's another fiddle

更多推荐

克隆div jQuery UI Datepicker问题(Clone div jQuery UI Datepicker issue)