JavaScript窗口确认弹出多次

Question

我试图使用confirm方法，但出现了多次确认窗口。我在Google上搜索并尝试了不同的方法，但不幸的是我不能正确地运行它。代码如下：

//user clicks on the delete button
$("#deletePopUpImage").click(function(){

        console.log("deletePopUpimageCalled");

        //get the id of the image
        id = ($(this).parent().prop("id"));

        //create the ajax request
        data = "typ=function&functionType=deleteUserImage&id="+id;

        //open the confirm box
        var r = confirm("Are you sure that you want to delete this image?");
        if (r == true) {
            console.log("loadAjaxCAlled");

            //Ajax call
            loadAjax(data);

            //hide the image and the loader
            hideImagePopup();
        } else {
            //do nothing
        }  
    });

奇怪的是，有时确认窗口会弹出两次，有时会弹出三次，而有时则如预期地只弹出一次。这就是插入了两个console.logs的原因。

“deletePopUpimageCalled”始终只出现一次。但是，“loadAjaxCAlled”会出现多次。

在Ajax请求的成功回调中，我只隐藏了缩略图div。

你知道上面的代码有什么问题吗？

谢谢 Stefan

- S. F.

---

你可能会不小心点击图像两次或三次。禁用第一次点击并检查结果。 - Rajeev Kumar

你尝试过在回调函数中调用ajax方法吗？ - Sandeep Nayak

@RajeevKumar 我该如何禁用点击事件？通过使用 jQuery 添加 disabled 属性吗？ - S. F.

Answer 1

可能是附加事件的代码：

$("#deletePopUpImage").click(function(){...});

被调用多次。每次 .click(...) 的调用都会创建一个新的处理程序，当按钮被点击时触发。

一些浏览器会将相同的日志条目堆叠在一起（这样日志就不会扩展得太快），这可能是您看不到“deletePopUpimageCalled”多次的原因。最好通过在浏览器中进行调试来检查此问题。

- andrew.fox

---

这意味着会有几个“deletePopUpImageCalled”。 - Quentin Roy

@Quentin Roy - 有些浏览器会将相同的条目堆叠在一起，因此您只有一个条目。 - andrew.fox

好的，确实如此。不过通常你会在控制台条目左侧以数字的形式看到它被接收的次数。另外，在那种情况下，他为什么会收到多个“loadAjaxCalled”呢？ - Quentin Roy

嗨，感谢您的评论！我同意Roy的观点。为什么有几个loadAjaxCAlled但只有一个deletePopUpimageCalled？这意味着在我看来只有一个点击事件被触发。肯定只有一个loadAjaxCalled！我很困惑^^ - S. F.

好的，如果你把 "console.log("deletePopUpimageCalled");" 改成 alert("deletePopUpimageCalled2"); 会怎样呢？JS 是同步的，我不希望 confirm() 方法出现任何奇怪的行为。 - andrew.fox

谢谢您的建议。奇怪的是，我现在无法再现这个问题。现在使用console.log也可以正常工作了。我认为代码的另一部分可能有问题。 - S. F.

Answer 2

好的，我找到了问题所在。在Ajax成功处理程序中，我将被删除的图像的div设置为display:none而不是删除它。因此，divIds可能会出现两次、三次等等。在更改代码以进行删除后，它可以顺利运行。

- S. F.