Question

我有一个按钮，可以调用模态表格来创建新的批准函。我在 form.php 中添加了该按钮。这是代码：

use yii\widgets\Pjax;
use yii\bootstrap\Modal;

.....
<?php
Modal::begin([
    'header' => '<h4>Create New Approval</h4>',
    'id' => 'modal',
    'size' => 'modal-lg'
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>

<div class="company-form">
<p><?= Html::button('<i class="glyphicon glyphicon-plus"></i> New Approval', ['value' => Url::to('../company/create-modal'), 'class' => 'btn btn-add-al', 'id' => 'modalButton']) ?></p>
.....
</div>

这是jquery函数：

$(function () {
    $('#modalButton').click(function () {
         $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

我有问题，那就是按钮只能工作一次。因此，当我单击按钮时，它将显示模态表单，如果我在模态表单外单击，模态表单将自动关闭，当我再次尝试单击时，该按钮将无法正常工作。刷新页面时它可以再次工作。

为什么会这样？以及如何解决它？

Answer 1

我在我的测试床上使用你的代码，实际上它完美无缺。我觉得你可能在jquery加载的地方遇到了问题。

默认情况下，jquery会在页面的页脚上加载，这意味着如果将脚本放在页面中间，可能会导致一些问题。所以请测试以下内容。

通过在config \ web.php上添加以下内容，在标题上加载jquery和其他脚本。如果它解决了问题，您可以稍后将脚本放在js文件中并在jquery之后加载它。
```
'components' => [
'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' => [
            'jsOptions' => [ 'position' => \yii\web\View::POS_HEAD ],
        ],
    ],
```

将您的脚本放入文档中（以防万一...）

$( document ).ready(function() {
    console.log( "ready!" );
    $(function () {
        $('#modalButton').click(function () {
            $('#modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
        });
    });
});

我在视图中使用此导入，所以我猜pjax不是问题。

使用yii \ widgets \ Pjax;
使用yii \ bootstrap \ Modal;
使用yii \ helpers \ Html;
使用yii \ helpers \ Url;
在浏览器«我正在使用chrome»Ctrl+Shift+J (Windows o Linux) o Cmd+Opt+J (Mac)上打开您的控制台。如果结果失败，可能会向您显示错误或警告。

Answer 2

之前我遇到过这个问题，这是因为我的jquery脚本在页面上被多次加载。检查浏览器的开发人员工具或使用yii的资产工具栏查看正在加载的资产。 Yii2默认加载jQuery，所以如果你手动添加它（也许你想要一个更新的版本），那么这可能会导致像这样的冲突。如果这有帮助，请告诉我。

Answer 3

将您的js更改为：

$(function () {
    /** @params this - document **/
    $(this).on('click', '#modalButton', function () {
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

Answer 4

您需要将return ( <View style={{ flex: 1 }}> <View style={{ flex: 1, flexDirection: 'row' }}> <Text style={styles.Title}>Acquista!</Text> <Ionicons name="ios-contact" size={42} color='red' style={{ marginTop: 65, marginLeft: 210 }} /> </View> <Logo /> </View> )事件与文档绑定，而不是$('#modalButton').click(function () {：

click

显示模态表单的Yii2按钮仅工作一次

4 个答案: