Yii2 Pjax 和 ActiveForm beforeSubmit 重新加载后不起作用？

我正在提交按钮上创建一个加载指示器，并使用 registerJs 函数将“开始”过程附加到 beforeSubmit 事件。

第一次它可以正常工作，但是在重新加载 Pjax 容器后，再次提交表单时该事件将不会触发。

我将整个视图文件包含在 Pjax 容器中，以便正确显示 Flash 消息。

这是 main.php 布局文件片段：

<?php Pjax::begin([
'id' => 'pjax-container',
'enablePushState' => false,
]); ?>

<?= Alert::widget(); ?>

<?= $content; ?>

<?php Pjax::end(); ?>

这是 registerJs 函数，位于 main.php 的以下部分：

<?php
$js = <<< 'SCRIPT'
$('#form').on('beforeSubmit', function(){
alert('Submitted...');
//$("#spinner").fadeIn();
});
SCRIPT;
$this->registerJs($js);
?>

这是 activeForm：

<?php $form = ActiveForm::begin(['id' => 'form', 'options' => ['data-pjax' => true]]); ?>

<?= $form->field($model, 'name')->textInput(['type' => 'text']) ?>

<?= $form->field($model, 'email')->textInput(['type' => 'email']) ?>

<?= $form->field($model, 'subject')->textInput(['type' => 'text']) ?>

<?php
echo $form->field($model, 'message')->textArea(['rows' => 6]);

echo $form->field($model, 'verify_code')->widget(Captcha::className(), [
        'captchaAction' => 'site/captcha',
        'template' => '<div class="row"><div class="col-lg-4">{image}</div><div class="col-lg-6">{input}</div></div>',
]);
?>

<button class="btn btn-success">
<span id="spinner" style="display: none; float:left; margin-right: 26px;">
<?php
echo Spinner::widget([
'pluginOptions' => [
    'top' => '50%',
    'left' => '10px',
    'lines' => 11,
    'length' => 5,
    'width' => 3,
    'corners' => 1,
    'trail' => 100,
    'speed' => 1.25,
    'radius' => 4,
],
]);
?>
</span>
<?php echo $model->isNewRecord ? 'Send Message' : 'Update'; ?>
</button>

<?php ActiveForm::end(); ?>

我正在使用 Kartik Spinner 小部件（详细信息和演示）

关于为什么在 Pjax 成功提交后加载数据容器后 beforeSubmit 事件不会触发的任何想法？

Thanks.

出现此问题的原因有多种。

首先，放置在其中的任何代码$(document).ready();而加载在ajax调用的页面（包含页面）加载后不会被执行。

其次，对外部脚本的任何引用（<script src>) 不保证在内联脚本之前加载。在 Yii2 的情况下，这些内联脚本将被注册registerJs()

让 Pjax 能够很好地加载复杂的脚本相关页面是not琐碎的。

有几件事可以解决您的问题：

1)内联脚本加载registerJs()并设置为POS_READY（默认？）将包含在$(document).ready()如果视图是通过渲染的render().

因此，通过渲染非常重要renderAjax()。这将确保内联脚本能够运行。

有时（大多数时候）你需要使用render()当静态加载和renderAjax()当 pjax 加载页面时。在您的实例中，为了将 Pjax 小部件放置在布局中，这是必需的。对于这些情况，您可以使用以下代码：

if(Yii::$app->request->getHeaders()->has('X-PJAX'))
{
    return $this->renderAjax('myview');
}
else
{
    return $this->render('myview');
}

2)当编写您知道将在 pjax 调用的上下文中加载的外部脚本时。使用：

$(document).on('ready pjax:success', function(){
    // ...
});

这将正确加载脚本。但请记住，每次 Pjax 调用成功时，它都会重新加载/重新绑定脚本。不幸的是，这可能不是我们所希望的。

另请记住，pjax:success加载包含的页面中的外部脚本后，事件不一定会触发。参见 3)

3)要解决脚本顺序问题，您需要从 pjax.js 脚本中删除以下行：

obj.scripts = findAll(obj.contents, 'script[src]').remove() 

但是，这会导致设置为禁用的浏览器出现问题eval()（这就是为什么这条线首先存在的原因）

Pjax 最终会解决这个问题。您可以跟踪进度here

如果有任何不清楚的地方请告诉我，我会重新表述。

UPDATE:Yii 2.0.7 引入了一些变化。其中之一是更新bower\yii2-pjaxto 2.0.6。这说明了一点3)不再需要并说明问题2)虽然不太重要，但了解它仍然是一件好事。