Question

这个问题需要冗长的解释。我正在使用以下代码来允许用户在UI上添加/删除行：

$(document).ready(function(){
//group add limit
    var maxGroup = 12;

//add more fields group
    $(".addMore").click(function(){
     if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
           alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });

//remove fields group
    $("body").on("click",".remove",function(){ 
      $(this).parents(".fieldGroup").remove();
    });
});

最初可见的初始输入字段在页面的一部分中：

<div class="form-group fieldGroup">
    <div class="input-group">
<!--INPUT FIELDS GO HERE--!>
    </div>
</div>

...以及当用户向UI添加“行”时出现的“副本”位于另一个目录中：

<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group">
<!--COPIED INPUT FIELDS GO HERE--!>
    </div>
</div>

所有这些都包含在单个form中，如下所示：

<form method="post" action="add-event_submit.php">
<!--fieldGroup AND fieldGroupCopy elements--!>
</form>

在大多数情况下，这很好。但是，在每一行中，我都有一个datepicker。

初始日期选择器如下：

<input type="text" name="date[]" id="datepicker1" value="DATE" style="width:102px; text-align:center" date-format="dd-mm-yyyy"></input>

要在后续行中显示的日期选择器是：

<input type="text" name="date[]" id="datepicker2" value="DATE" style="width:102px; text-align:center" date-format="dd-mm-yyyy"></input>

因此，显示/隐藏功能似乎导致日期选择器出现各种问题。例如，style="display: none;中的fieldGroupCopy停止显示第二个及以后的日期选择器。输入字段在那里，但是单击它却无济于事，因为datepicker弹出窗口仍处于隐藏状态。

因此，我希望可以修改jquery代码以解决此问题。

jQuery使用Datepicker显示/隐藏多余的行

0 个答案: