logo标签列表

克隆div jQuery UI日期选择器问题

jqueryjquery-uijquery-ui-datepicker
3
我将翻译如下：

我有一个包含几个字段的 div，可以克隆到另一个 div 中。其中一个字段使用 datepicker ui。但是，当我去克隆 div 时，datepicker 对于克隆的输入停止工作。我已经使用并编辑了来自 this question 的以下内容，但没有成功。

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); });
});

});

你试过把所有代码放在 doc ready 内吗？我的意思是 doc ready 下面的第二个代码，放在 ready 里看看是否有帮助。 - Jai
是的，我现在已经完成了，我的错误。我现在已经克隆了元素，日期选择器正在显示，但它总是将日期添加到第一个输入框中。 - Pooshonk
3个回答
4

以下是需要查看的几个问题:

  • 看起来你的第二个代码块在$(document).ready(function())之外。
  • var myDiv是你的按钮，它没有子元素。
  • 当你克隆输入框时，会出现重复的child_dob id。

至于如何在克隆的输入框上使用日期选择器，这应该就可以了：

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

这是一个简化的示例

编辑

现在我了解您的问题，因为您已经添加了完整的代码。在您的问题中，您没有提到原始的.child_dob已经有一个datepicker。这有点混乱，但您需要从克隆元素中删除datepicker，然后再次添加它：

替换以下行：

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

随着：

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

Here's another fiddle

日期选择器现在已经出现了，但是当我选择日期时，它会更改我克隆的原始输入框的值。有什么想法吗？ - Pooshonk
顺便说一下，你可以删除整个第二个代码块。你不需要它。 - billyonecan
它仍在做同样的事情。由于第一个和第二个输入具有相同的类，因此对于克隆的输入不起作用。我已经删除了第二个代码块，因为您的示例是迄今为止最接近解决方案的。 - Pooshonk
它们拥有相同的类并不重要。每个“克隆”都被分配一个新的、独特的日期选择器。你从你的“child_dob”输入中删除了“id”吗？ - billyonecan
我已经更新了我的答案，有多个字段被克隆，但我仍然不明白为什么它不起作用！ - Pooshonk
0

尝试在元素附加后调用日期选择器

clone.appendTo('#child').datepicker();
0

请查看fiddle。

var clone = $('.add-child input:first').removeClass('hasDatepicker')
  .removeData('datepicker').clone();
        var newCloneId="child_dobx_"+(child_count+1);
        clone.attr("name",newCloneId).attr("id",newCloneId).appendTo('#add-child');

我尝试移除克隆元素上的日期选择器类和数据，然后将其附加。 它可以工作。请检查这是否是所需内容。

现在需要克隆的字段不止一个。我已经更新了我的问题，因为它似乎仍然无法工作 :( - Pooshonk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接