Javascript 确认 & while 循环回显

Question

我有一个小问题，我用 PHP while 循环制作了一个删除按钮，如下所示：

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<a href="somewhere.php?id='.$id.'"><button onclick="delconfirm()">Delete</button></a>

}

这个回声是一些内容的一些删除按钮。但是我需要用户确认才能删除，这就是 onclick="delconfirm()" 的用武之地。

我的确认是这样的：

function delconfirm()
{
    var r=confirm("Are you sure you want to delete this content?");

    if (r==true){

        // ...do nothing i guess? it needs to redirect using the PHP echo'd link...

    }
    else{

        window.location = "edit.php";

    }
}

但是，无论您按取消还是确定，它都会将其删除。我该如何解决这个问题？

Answer 1

改成这样：

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<a href="somewhere.php?id='.$id.'"><button onclick="return delconfirm();">Delete</button></a>

}

然后是你的函数：

function delconfirm()
{
    return confirm("Are you sure you want to delete this content?");
}

编辑：如果您想要更多unobtrusive解决方案：

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<input type="button" value="Delete" data-id="$id" />';

}

然后是一些 javascript 来绑定事件：

function bindButtons() {
    var buttons = document.getElementsByTagName("input");
    for (var i = 0; i < buttons.length; i++) {
        if (buttons[i].type == "button") {
            buttons[i].onclick = function () {
                location.href='somewhere.php?id=' + this.getAttribute("data-id");
            }
        }
    }
}

并按照 Ian 的建议将其绑定到 window.onload：

window.onload = bindButtons;

注意：如果您使用 jQuery，此解决方案会更简单、更优雅。

Working jsFiddle

Answer 2

您需要停止/删除当前的点击事件。执行您的代码后，事件会到达锚点并触发点击。使用 MooTools 只需添加 'new Event().stop();'。我认为jQuery也有类似的东西。

编辑：Hanlet Escaño 是对的。可以返回true（浏览器会重定向到href中的URL，或者false让浏览器什么都不做）

Answer 3

为了防止 HTML 链接正常工作，您必须在 js 函数或 event.preventDefault() 中返回 false，其中 event 是传递给点击事件函数的参数

在 a 元素上而不是 a 标签内的元素上放置点击事件时，我做得很薄。但它可能会起作用。

Answer 4

如果用户按下取消，那么您需要阻止事件执行它通常会执行的操作。试试这个，例如：

function delconfirm(e) {
    e = e || window.event;

    if (!confirm("Are you sure you want to delete this content?")) {
        e.preventDefault();

        // This will prevent the event from bubbling up to the <a>.
        e.stopPropagation();

        return false; // For the ancient/crappy browsers still out there.
    }

    return true;
}