jquery - pjax成功后绑定(bind)日期选择器会导致无限循环

Question

所以我有这个问题，我输入了类日期时间，我将日期选择器绑定(bind)到它，使用:

$(".date-time").datepicker();

在kartik GridView 中过滤后，一切正常，因为它假设日期选择器被解除绑定(bind)(因为pjax重新加载)。我正在尝试再次绑定(bind)它:

$(document).on("pjax:success", function() {
    $("#calendartasksearch-starttime").datepicker();
});

我陷入无限循环~~

我的 GridView 配置:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'pjax' => true,      
    'pjaxSettings' =>
        [
            'neverTimeout'=>true,
            'options'=>['id'=>'pjax-data'],
            'loadingCssClass' => false,
        ], 
    'bootstrap' => true,
    'condensed' => true,
    'responsive' => true,
    'showFooter' => true,
    'hover' => true,
    'showPageSummary' => true,
    'resizableColumns' => false,
    'columns' => $columns,
    ]);

带有输入过滤器的列:

[
'label' => 'Task Start',
'headerOptions' => ['style' => 'text-align: center;'],
'attribute' => 'startTime',
'filter' => Html::activeInput('text', $searchModel, 'startTime', ['style' => 'text-align: center', 'class' => 'form-control date-time']),       
'value' => 'startTime',
'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;' ],
],

编辑。

好吧，我设法摆脱无限循环:

$(document).one("pjax:success", function() {
    $(".date-time").datepicker();
});

但我仍然可以重新启动插件

Answer 1

好的，我自己解决了。

首先，问题是你无法在ajax刷新后重新启动两个.datepicker，它只会进入无限循环[即使你为每个元素都有单独的名称+id+类]。

我解决问题的方法是:

使用 widget 启动一个文件，使用 activeInpute 启动第二个文件，如下所示:

         [
            'label' => 'Task Start',
            'headerOptions' => ['style' => 'text-align: center;'],
            'attribute' => 'startTime',
            'filter' => DatePicker::widget(['model' => $searchModel, 'attribute' => 'startTime', 'dateFormat' => 'yyyy-MM-dd', 'options' => ['id' => 'date-time2','style' => 'text-align: center', 'class' => 'form-control']]),
            'value' => 'startTime',
            'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;', 'class' => 'datepicker' ],
        ],
        [
            'label' => 'Task End',
            'headerOptions' => ['style' => 'text-align: center;' ],
            'attribute' => 'endTime',
            'filter' => Html::activeInput('text', $searchModel, 'endTime', ['style' => 'text-align: center', 'id' => 'date-time', 'class' => 'form-control']),
            'value' => 'endTime',
            'contentOptions' => ['style' => 'text-align: center; vertical-align: middle;' ],
        ],

首先，我在事件输入中启动日期选择器:

$(document).ready(function(){
    $("#date-time").datepicker({
        dateFormat:"yy-mm-dd",
        orientation: "bottom auto"
    });
});

ajax刷新后，我重新启动两个日期选择器:

$(document).on("pjax:success", function(){
    $("#date-time, #date-time2").datepicker({
        dateFormat:"yy-mm-dd",
        orientation: "bottom auto"
        });
});

如果有人知道更好的方法来做到这一点，请详细说明。