Modal window not opening if there is pjax or GridView?

Question

JavaScript

there is a modal button in layout\main

<?php
yii\bootstrap\Modal::begin([
    'headerOptions' => ['id' => 'modalHeader'],
    'id' => 'my-modal',
    'toggleButton'=>['click'],
    'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
yii\bootstrap\Modal::end();
?>

It opens when you click a button in the view.

<?= Html::button('modal', ['value' => Url::to(['admin/add-device-type']), 'title' => 'title', 'class' => 'modal-test btn btn-success']); ?>

But all this works if there is neither GridView nor Pjax in the view.
What could be causing this? in which direction to drip?

script included in AppAsset

public $js = [
        'js/script.js',
        'js/jquery-2.2.3.min.js',
        'js/app.min.js',
    ];

script.js

$(function () {
    $(document).on('click', '.modal-test', function () {

        if ($('#my-modal').data('bs.modal').isShown) {
            $('#modal').find('#modalContent')
                .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {

            $('#my-modal').modal('show')
                .find('#modalContent')
                .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
    });
});

view

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\helpers\Url;

?>

<div class="col-md-4">
    <div class="box">
        <div class="box-header">
            <h1 class="box-title">Типы оборудования</h1>

        </div>
        <div class="box-body">
            <?= GridView::widget([
                'dataProvider' => $device_type,
                'layout' => "{pager}{items}",
                'tableOptions' => [
                    'class' => 'table table-bordered table-hover'
                ],
                'columns' => [
                    'type_name:text:Тип',
                    'category:text:Категория',
                    [
                        'attribute' => 'Удалить',
                        'format' => 'raw',
                        'value' => function ($model) {
                            return Html::a("<span class=\"fa fa-trash-o\"></span>", ['admin/delete-device', 'id'=>$model['id']]);
                        },
                    ],

                ],
            ]); ?>
            
            <?= Html::button('modal', ['value' => Url::to(['admin/add-device-type']), 'title' => 'title', 'class' => 'modal-test btn btn-success']); ?>
        </div>
    </div>
</div>

Answer 1

This is most likely due to a jquery conflict. You connect your jquery in AppAsset, and grid and other elements connect yii\web\JqueryAsset as a result of which you have a conflict (read about resource dependency in yii). Accordingly, you need to exclude the jquery-2.2.3.min.js file from AppAsset