bootstrap模态远程数据ajax是重复的

Question

我正在使用bootstrap v3.3.0模式窗口并且在删除它时遇到问题。我有一个订单列表，每个订单旁边都有一个按钮，可以查看更多详细信息。单击此按钮时，将打开模态窗口。一旦模态窗口打开，就会进行ajax调用。

所以基本上下面的ajax调用是在加载模态窗口时进行的：

    $("#footable").on('click', '.btn', function() {

        var id = $(this).attr('id');
        $('#myModal').on('show.bs.modal', function(e) {


            $(".modal-title").text("Items Order No:" + id);

            $.ajax({
                url: 'url' + id,
                type: 'GET',
                success: function(data) {
                    var tbody = $("<tbody id='modal-content'>");
                    if (!jQuery.isEmptyObject(data)) {

                        //build the table rows and append them to the main table
                        for (var g = 0; g < data.length; g++) {
                            if (data[g].quantity != 0) {
                                row = '<tr id=+data[g].id+>';
                                row += '<td>' + data[g].id + '</td>';
                                row += '<td>' + data[g].description + '</td>';
                                row += '<td>' + data[g].price + '</td>';
                                row += '<td>' + data[g].quantity + '</td>';
                                row += '</tr>';
                                tbody.append(row);
                            }
                        }

                        tbody.append("<tbody />");
                        tbody.appendTo("#footable1");

                    } else {
                        var row = '<tr>';
                        row += '<td>No items returned!</td>';
                        row += '</tr>';
                        tbody.append(row);
                        tbody.append("<tbody />");
                        tbody.appendTo("#footable1");

                    }

                },
                error: function(e) {
                    //called when there is an error
                    //console.log(e.message);
                }
            });

        }).modal('show');
    });

这就是我尝试删除它的方法：

$('body').on('hidden.bs.modal', '.modal', function() {
        $(this).removeData('bs.modal').find("#modal-content").empty();;

});

以下是模态的html：

                <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title">Modal title</h4>
                        </div>
                        <div class="modal-body">

                                 <table class="footable1" id="footable1" data-page-size="5">
                                    <thead>
                                        <tr>
                                            <th>
                                                Order ID
                                            </th>
                                            <th>
                                                Item
                                            </th>
                                            <th>
                                                Quantity
                                            </th>
                                            <th data-hide="phone">
                                                Unit Price
                                            </th>
                                            <th data-hide="phone">
                                                Total Price
                                            </th>

                                        </tr>
                                    </thead>
                                   <!--the body will be appended dynamically here -->
                                    <tfoot>
                                        <tr>
                                            <td colspan="11">
                                                <div class="pagination pagination-centered"></div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>

                       </div>
                        <div class="modal-footer">
                            <button type="button" id="modalClose" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

我遇到的问题是当我打开一个新的模态时，它似乎保留了之前的ajax调用的内容。对于订单ID 3，它将保留订单ID 1＆amp; 2个订单项目，直到刷新屏幕。

有人知道如何解决这个问题吗？

提前致谢