javascript - 在 PreventDefault() 之后触发事件无法按预期工作

Question

$(document).on('click', '[data-toggle="if-exist"]', function (e, options) {
    options = options || {};

    if (options.fileExist) {
        return true;
    }

    var target = e.currentTarget;
    var fileId = $(this).data('file');
    e.preventDefault();

    $.ajax({
        url: Routing.generate('checkFile', {file: fileId }),
        type: 'HEAD',
        statusCode: {
            404: function () {
                alert('File does not exist');
            },
            200: function () {
                $(target).trigger('click', { 'fileExist': true });
            }
        }
    });
});

当单击按钮时，会发送 HEAD 请求，当我收到 200 响应时，会再次触发单击事件，但这次使用 fileExist 选项。再次调用监听器(我检查了这一点)但没有任何反应，就像 e.preventDefault() 仍然有效。有什么想法吗？

解决方案

trigger() 方法将触发 jQuery 事件，但不会触发浏览器的默认行为，在我的例子中，默认行为是重定向到另一个页面。此代码有效:

$(document).on('click', '[data-toggle="if-exist"]', function (e) {
    var target = this;
    var fileId = $(this).data('file');
    e.preventDefault();

    $.ajax({
        url: Routing.generate('checkFile', { file: fileId }),
        type: 'HEAD',
        statusCode: {
            404: function () {
                alert('File does not exist');
            },
            200: function () {
                var event = document.createEvent('MouseEvents');
                event.initEvent('click', false, false);
                target.dispatchEvent(event);
            }
        }
    });
});

Answer 1

使用 e.stopImmediatePropagation();停止 ajax 的多次调用。