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

<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