更改模态内容会中断 AJAX 个事件

Question

我将 jquery-ujs 用于 ajax 请求 (data-remote="true")。我的问题是，第一个请求没问题，而第二个请求是运行，但它中断了。每当我调用事件 $('#modal').empty() 或 $('#modal').text('') 或 $('#modal').html('') 时，都不会调用更多事件。

为了清楚起见，这里是代码：

$(document).on('ajax:beforeSend', function () {
    console.log('beforeSend');
    $('#modal').empty().modal('show');
});

$(document).on('ajax:send', function () {
    console.log('send');
});

$(document).on('ajax:success', function (e, xhr) {
    console.log('success');
    $('#modal').html(xhr).drags({ handle: '.modal-header' }).modal('show');

    if (typeof doWork === 'function') {
        doWork();
    }
});

$(document).on('ajax:complete', function () {
    console.log('complete');
});

控制台输出：

发送前
发送
成功
完成
发送前

如果我将 $('#modal').empty().modal('show'); 移动到发送事件，那么它将被调用，但是成功方法再也不会被调用（既没有错误也没有完成，仅此而已）。

这个问题困扰了我好几个小时...谢谢你的帮助。

Answer 1

如何将 empty() 移动到 ajax:complete？在这种情况下，当您的模式关闭时，它会空着打开以备下次使用并准备好重新使用。我建议您将此命令放在最后一步，这样它就不会引起任何问题。像下面这样： $(document).on('ajax:complete', function () { console.log('complete'); . . . . $('#modal').empty(); }); 我相信这不是最好的解决方案，肯定还有其他解决方案。但我希望这个解决方案能解决您的问题。

Answer 2

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

Answer 3

我的解决方法是避免使用 jquery-ujs 事件和 使用全局 ajax 事件，所以我的最终工作代码是：

$(document).ajaxSend(function () {
    $('#modal').empty().modal('show');
});

$(document).ajaxSuccess(function (e, xhr) {
    $('#modal').html(xhr.responseText).drags({ handle: '.modal-header' }).modal('show');

    if (typeof doWork === 'function') {
        doWork();
    }
});

更改模态内容会中断 AJAX 个事件

Changing modal content breaks AJAX events

javascript

php

ajax

jquery

modal-dialog