Why does jQuery submit screw up this click function?

Why does jQuery submit screw up this click function?

I've been using this throughout my code with no issue:
// 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();
});
});
}
But inside my submit function, it doesn't work as expected:
$(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?");
}
});
Expected behavior: the alert message should dissapear when the user clicks
(anywhere), scrolls, touches, or resizes the window, which it does.
However, if the user has made an error in the form a second time, the
alert message instantly fades out, even though I haven't
scrolled/resized/clicked/etc. I didn't even catch what the error read. Any
help is appreciated.