点击模态后重置 href 属性

Question

我在 gridview 中有几个按钮来调用引导模式（相同的模式但内容不同）：

return Html::a('<i class="fa">&#xf06e;</i> ', $key, [
                'title' => 'Lihat rincian agenda ini',
                'data-bs-toggle' => 'modal',
                'data-bs-target' => '#exampleModal',
                'class' => 'modal-link',
            ]);

return Html::a('<i class="fab text-danger fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
                    'title' => 'Laporan agenda belum disetujui',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);
 return Html::a('<i class="fab text-success fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
                    'title' => 'Lihat laporan agenda ini',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);

这是调用模态的 JS：

    $(function () {
    $('.modal-link').on('click', function (e) {
        e.preventDefault();
        $('#exampleModal').modal('show').find('#modalContent').load($(this).attr('href'));
    });
});

第一次单击任何按钮都会给出正确的内容（href）。但第二次点击和下一次点击会提供第一次点击的内容。如何重置内容以便每次点击都能提供准确的 href 内容？

Answer 1

问题可能是内容在第一次加载后被缓存。对于这种情况，您必须在隐藏模式时清除模式内容。下面是将事件处理程序绑定到

hidden.bs.modal

事件的示例代码。

$(function () {
  // ...rest of your code

  $('#exampleModal').on('hidden.bs.modal', function () {
    $(this).find('#modalContent').empty();
  });
});