jquery - Bootstrap 模式第二次不触发 jQuery 函数

Question

我正在尝试触发一个函数，该函数是 shown.bs.modal 上的表单提交函数，但它只在第一次触发。

我的模态:

列出的每一项都是一个表单。我的 jQuery 代码是:

$('#edit_modal').on('shown.bs.modal', function (event) {
    console.log("shown");
    $('#edit_form').submit(function (event) {
        event.preventDefault();
        var url = $(this).attr('action');
        var data = $(this).serialize();
        $.post(url, data, function (data) {
            $('#edbtn').attr({
                class: 'btn btn-success',
                disabled: 'true',
                value: data
            });
        });

    });
});

在控制台中，我只能在第一次打开时看到“显示”日志。而且只有第一次点击“保存”按钮时，它才能正常工作，但第二次它会重定向到actionurl.php页面，这意味着这次没有触发此功能，因为它没有重新显示。

注意:我已经尝试过 $(this).modal().hide().show();但这并不 重新显示模式或类似的东西。

Answer 1

如果你的模态是动态创建的(如果它在关闭后从 dom 中删除并在打开时追加)，你需要使用另一个事件构造:

$(document).on('shown.bs.modal', '#edit_modal', function (event) { ... })

提交事件也是如此:

$(document).on('submit', '#edit_form', function(event) { ... })