为什么jQuery提交搞砸了这个点击功能？

Question

我一直在整个代码中使用它，没有问题：

// alerts
window.cAlert = function (msg) {
    // insert
align.append("<div id=\"alert\">" + msg + "</div>");
    // object
    alertBody = $("#alert");
    // css values
    alertTop = (wh - alertBody.outerHeight()) / 2;
    alertLeft = (ww - alertBody.outerWidth()) / 2;
    // alert css
    alertBody.css({
        top: alertTop,
        left: alertLeft
    }).transition({
        opacity: 1
    }, 300);
    // delete alert
    $(window).on("click scroll touchstart resize", function (e) {
        alertBody.transition({
            opacity: 0,
            x: -(ww / 2),
            rotate: "-360deg"
        }, 600, function () {
            alertBody.remove();
        });
    });
}

但是在我的Submit函数中，它没有按预期工作：

  $(document).on("submit", "#twigForm", function (e) {
     // fix
     e.preventDefault();
     // object
     var twigObj = $(this);
     // the file data
     var file = ($("#upload"))[0].files[0];
     // checks
     if(!file) {
         cAlert("You didn't select an image, silly");
     } else if(file.size >= 2097152) {
         cAlert("Filesize cannot exceed 2 MB");
     } else if(file.type !== "image/jpeg" && file.type !== "image/jpg" && file.type !== "image/gif" && file.type !== "image/png") {
         cAlert("Are you sure that's an image?");
     }
});

预期的行为：当用户单击（任何位置），滚动，触摸或调整窗口大小时，警报消息应消失。 但是，如果用户第二次在表格中犯了一个错误，即使我没有滚动/调整大小/单击/等等，警报消息也会立即消失。 我什至没有抓住错误所读的内容。 任何帮助表示赞赏。

Answer 1

设置事件处理程序时，请尝试使用.one()而不是.on() 。 您的代码将处理程序留在窗口上，所以我敢打赌，按钮上的“单击”将触发由先前提交安装的处理程序，因此它将立即开始倒计时以删除警报。

通过使用.one() ，每个处理程序将只运行一次。

Answer 2

这是您的代码的工作演示 ：

 $(window).on("click scroll touchstart resize", function (e) {
        alertBody.transition({
            opacity: 0,
            x: -(ww / 2),
            rotate: "-360deg"
        }, 600, function () {

$（this）.remove（）;

        });
    });

使用$(this).remove()代替alertBody.remove 。 我已经修复了您的原始演示中的一些错字，并且按预期工作