$（this）.remove（）;

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

Answer 2

以下是您的代码的demo：

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

$（this）.remove（）;

        });
    });

使用alertBody.remove而不是$(this).remove()。我修改了原始演示中的一些拼写错误并按预期工作

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

2 个答案:

$（this）.remove（）;