通过弹出窗口确认删除

Question

我正在尝试创建一个 .php 文件，该文件使用确认操作的弹出窗口删除数据库行。 我知道那是十几个例子，但是经过多次尝试后我无法做到这一点，因为我不了解 javacript。 经过一番研究，我发现了这个（link）示例源代码 github link。

这是我设法“创建”的简化代码，但是当我在其他按钮上单击第 I 项的删除操作时，我只会得到弹出窗口，该操作会立即执行。有人可以帮我解决这个问题吗？！

<title>Title</title>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="../jquery.confirm.js"></script>

<div class="container">

    <table class="table">

        <thead>
            <tr>
                <th class="col-lg-3">#</th>
                <th class="col-lg-1">Name</th>
                <th class="col-lg-8">Action</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td><a id="simpleConfirm" href="index.php?action=delete&id=1" class="btn btn-primary">Delete</a></td>
            </tr>

            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td><a id="simpleConfirm" href="index.php?action=delete&id=2" class="btn btn-primary">Delete</a></td>
            </tr>

            <tr>
                <td>3</td>
                <td>Item 3</td>
                <td><a id="simpleConfirm" href="index.php?action=delete&id=3" class="btn btn-primary">Delete</a></td>
            </tr>

        </tbody>

    </table>

    <script>
        $("#simpleConfirm").confirm();
    </script>

</div>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Answer 1

一个 ID 只能在一个页面上使用一次。要定位多个相似元素，请使用类而不是 ID 进行重写。另外，请记住将您的确认“问题”字符串添加到confirm 的参数中，并在其后面加上您的条件代码。

<td><a class="simpleConfirm" href="index.php?action=delete&id=1" class="btn btn-primary">Delete</a></td>

var confirmed = $('.simpleConfirm').confirm('Are you sure?');
if(confirmed) { 
  /* do something when user clicks 'ok' */ 
} else {
 /* optionally do something else when user clicks 'cancel' */ 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

https://developer.mozilla.org/en-US/docs/Web/API/window.confirm

Answer 2

首先，要使用 jquery 选择器$("#id")，您需要确保 html 元素的 ID 是唯一的。接下来，我假设您正在寻找一个弹出框，提示用户是否要删除指定的记录。

你可以这样做

$("#simpleConfirm").click(function(){
    var check = confirm("Please confirm that you want to delete the record?");

    if (check) {
        // insert code to delete record
    }
});