使用 Bootstrap 的确认弹窗（ Confirmation Box）的时候，用 JavaScript 去处理确认和取消按钮。如果这个需要设置弹窗的这个按钮在一个 While Loop 里面的话怎么办呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3515 天前的主题，其中的信息可能已经有所发展或是发生改变。

根据这个Post做的
http://stackoverflow.com/a/8983053/4196468

演示文档： http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

在演示里面完全没有问题，但是我实际使用的时候却根本没办法处理URL

讲一下我的情况，一个系统从数据库读取数据后通过While Loop 放到一个表格中，每行一个数据，每个数据有不同的信息，然后每个数据（每行）有一个可以删除的按钮来删除数据

每个删除是提交到另外一个PHP页面中解决的，PHP 页面通过GET（或者POST）来确认数据的ID然后删除这个数据

现在为了避免用户无意删除东西，需要加一个确认的步骤，按照上面那个StackOverflow处理了之后却发现根本没办法用，没有办法去Pass PHP页面地址

下面贴上Code大家帮忙看看哪里出问题了

<script type="text/javascript">
$('#cyclist-show button').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

$('.debug-url').html('Delete URL: <strong>' + $(this).find('#cyclist-show button').attr('href') + '</strong>');
});

</script>

$result = search_id($dbc, $id);

    if ($result != false && $result -> num_rows != 0) {
        echo "<div class = 'table-responsive'>";
        echo "<table class='table-responsive' id='cyclist-show' align='center'>";
            echo "<tr>

.... 省略

</tr>";
        while($row = mysqli_fetch_assoc($result)){

... 省略

echo "<td id='cyclist-button-td'>";
                                echo "<div class='hidden-xs'>";
                                ?>
                                <button class="btn btn-default" data-href="./delete-bicycle.php?id="<?php echo $row['ID'] ?>" data-toggle="modal" data-target="#confirm-delete">
                                Delete
                                </button>
                                <?php
                                echo "</div>";
                                echo "</td>";

....... // 省略
}
echo "</table>";
echo "</div>";
} else {
echo "</br>You do not have any bicycle that registered with system";
}
?>
</div>
</section>

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
            </div>

            <div class="modal-body">
                <p>You are about to delete this, this procedure is irreversible.</p>
                <p>Do you want to proceed?</p>
                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>

第 1 条附言 · 2015-03-30 05:42:58 +08:00

说明下，确认的对话框可以弹出，但是点OK/确认后没有反应，应该是URL没有被输入到JavaScript中

删除

弹窗

数据

8 条回复 • 2015-03-30 18:42:36 +08:00