javascript - 为什么 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();
        });
    });
}

但是在我的提交函数中，它没有按预期工作:

  $(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()，每个处理程序将只运行一次。