Ui在使用jQuery日期选择器时中断

Question

我有一个应用程序，它具有向现有表添加行的功能。请参阅下图：

此处事件日期列是具有名为dp1的类的日期选择器。所以每次添加行按钮时都会添加表行。日期选择器和日期选择器完美地工作。当我们需要在添加新行ui中断后更改之前的购买日期时，请在此处查看错误页面图像：

我正在使用jquery日期选择器。请参阅以下代码：

<table class="table" id="even-table">
<thead>
    <tr>
        <th class="text-center">
            <div class="checkbox">
                <label>
                    <input name="select_all" id="checkall"
                                   type="checkbox"
                                   name="optionsCheckboxes">
                </label>
            </div>
        </th>
        <th>Event Description</th>
        <th>Event Date</th>
        <th></th>
        <th>Buy Date</th>
        <th>Sell Date</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="checkbox">
                        <label>
                            <input type="checkbox" class="check-class checkbox"
                                   name="optionsCheckboxes">
                        </label>
                    </div></td>
        <td><input type="text" name="" class="form_control event_desc"></td>
        <td><input  type="text" name=""  class="form_control dp1"></td>
        <td><i  class="fa fa-calendar ca_icn"></i></td>
        <td><input type="text" name="" disabled class="form_control">
        </td>
        <td><input type="text" name="" disabled class="form_control">
        </td>
    </tr>
</tbody>

表行追加代码如下所示

$(document).ready(function(){
    $("#checkall").click(function () {
        $(".checkbox").attr('checked', this.checked);
    });

    var markup = '<tr><td><div class="checkbox"><label><input type="checkbox" name="optionsCheckboxes" class="check-class checkbox"><span class="checkbox-material"><span class="check"></span></span>'
    +'</label></div></td><td><input type="text" name="" class="form_control event_desc"></td><td><input  type="text"  name="" class="form_control dp1"></td><td><i class="fa fa-calendar ca_icn"></i></td> <td><input type="text" name="" disabled class="form_control">'
                                                +'</td> <td><input type="text" name="" disabled class="form_control"></td></tr>';
    $("table tbody").append(markup);
     });
// Find and remove selected table rows
    $("#removeRow").click(function(){
        $("table tbody").find('input[name="optionsCheckboxes"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });
});

这是我的日期选择器代码

$('body').on('focus',".dp1", function(){
  $(this).datepicker({
    format: 'yyyy-mm-dd',
  })
});

Answer 1

使用表的类名追加您动态创建的行。请在下面找到解决方法。

<table class="table event_table" id="even-table">
<thead>
    <tr>
        <th class="text-center">
            <div class="checkbox">
                <label>
                    <input name="select_all" id="checkall"
                           type="checkbox"
                           name="optionsCheckboxes">
                </label>
            </div>
        </th>
        <th>Event Description</th>
        <th>Event Date</th>
        <th>Buy Date</th>
        <th>Sell Date</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <div class="checkbox">
                <label>
                    <input type="checkbox"
                           class="check-class checkbox"
                           name="optionsCheckboxes">
                </label>
            </div>
        </td>
        <td><input type="text" name=""
                   placeholder="Iphone 10 introduction"
                   class="form_control event_desc"></td>
        <td>
            <div class="form-group has-success has-feedback">
                <input type="text" name=""
                       placeholder="March 5, 2018"
                       class="form_control dp1 date_field">
                <span class="fa fa-calendar ca_icn form-control-feedback"></span>
            </div>
        </td>

        <td><input placeholder="March 1, 2018" type="text" name="" disabled
                   class="form_control date_field ">
        </td>
        <td><input type="text" placeholder="March 10, 2018" name="" disabled
                   class="form_control date_field">
        </td>
    </tr>
</tbody>

请注意新的班级名称“event_table” 现在将新创建的行追加到此类名称。请找到下面的代码

$(document).ready(function(){
$("#checkall").click(function () {
    $(".checkbox").attr('checked', this.checked);
});
        $("#addRow").click(function(){

    var markup = '<tr><td><div class="checkbox"><label><input type="checkbox" name="optionsCheckboxes" class="check-class checkbox"><span class="checkbox-material"><span class="check"></span></span>'
    +'</label></div></td><td><input type="text" name="" placeholder="Iphone 10 introduction" class="form_control event_desc"></td><td><div class="form-group has-success has-feedback">'
                                                                +'<input type="text" name="" placeholder="March 5, 2018" class="form_control dp1 date_field ">'
                                                                +'<span class="fa fa-calendar ca_icn form-control-feedback"></span></div>'
                                                        +'</td><td><input type="text" name="" placeholder="March 1, 2018" disabled class="form_control date_field ">'
                                                +'</td> <td><input type="text" name="" disabled placeholder="March 10, 2018" class="form_control date_field"></td></tr>';
    $(".event_table tbody").append(markup);
    });

// Find and remove selected table rows
$("#removeRow").click(function(){
    $("table tbody").find('input[name="optionsCheckboxes"]').each(function(){
        if($(this).is(":checked")){
            $(this).parents("tr").remove();
        }
    });
});

}）;

在下面找到datepicker代码。

$(document).ready(function(){
$('body').on('focus',".dp1", function(){
    $(this).datepicker({
        format: 'yyyy-mm-dd',
    })
});

}）;

问题是您新创建的表行与datepicker表发生了冲突。