引导 4 模态在 $.get 之后无法正常工作

Question

我的应用程序中有几个模式，除了我通常通过$.Get.调用的模式外，它们似乎工作得很好

内容已加载，但按钮不起作用。我不能使用取消按钮、关闭按钮和提交按钮，但如果我按Enter键，我可以提交表单。

这是ajax调用的代码：

$(document).on('click', '.open-modal', function(event) {
var pageName = $(this).attr('pageName');
$.get(pageName, function(data) {
let result = $(data).find('#copy-modal');
$('#generic-modal').html(result);
});
$("#generic-modal").modal('show');
});

这是触发事件的按钮或链接的代码：

<button type='button' name="uid" id="openCompany" pageName="rt_users/empresas/{{$user->id}}" class="btn btn-info open-modal"> |
<i class="material-icons">business</i>
<div class="ripple-container"></div>
</button>

这是通用模式代码：

<div id="generic-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

由于要将整个模态替换为另一个模态，因此DOM与函数启动时不同。

您有两个选项，您可以只更改模态的内容(在这种情况下通常会这样做(，也可以在执行show函数之前刷新DOM对象。

要刷新DOM对象，您可能需要一些事件委派。

我的建议是只使用选项一并替换它：

$('#generic-modal').html(result);

有了这个：

$('#generic-modal .modal-body').html(result);