javascript - 模态未使用新数据刷新

Question

我有一个页面，其中所有数据都是从数据库动态加载并显示在 div 中。每个 div 上都有一个名为 View 的按钮。单击此按钮后，我调用一个方法:onclick="getdetails(this)"。此方法使用数据动态创建一个模态，并且工作完全正常。

function getdetails(par) {
    var modaldiv = '';
    var maincontent = '';
    var htourid = document.getElementById("htourid" + par.id).value;
    var hadultprice = document.getElementById("hadultprice" + par.id).value;
    var hchildprice = document.getElementById("hchildprice" + par.id).value;
    var hdescription = document.getElementById("hdescription" + par.id).value;
    var htourname = document.getElementById("htourname" + par.id).value;

    $.ajax({
        type: "GET",
        url: "xxxxxxxxxxxx" + htourid,
        dataType: "json",
        contentType: "application/json",
        success: function(data) {
            var rowcount = 1;
            for (var i = 0; i < data.GetToursDetailsimagesResult.TourImages.length; i++) {
                if (rowcount == 1) {
                    maincontent += '<div class="item active">' +
                        '<img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/>' +
                        '</div>';
                } else {
                    maincontent += '<div class="item">' +
                        '<img src="' + data.GetToursDetailsimagesResult.TourImages[i].ImagePath + '" alt=""/>' +
                        '</div>';
                }
                rowcount++;
            }
            modaldiv = '<div id="modal-package" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">' +
                '<div class="modal-dialog modal-lg">' +
                '<div class="modal-content">' +
                '<div class="modal-header">' +
                '<a  class="close" href = "Tours_and_Activities.aspx" aria-hidden="true">&times;</a>' +
                '<ul class="nav nav-tabs" data-toggle="tabs">' +
                '<li class="active"><a href="#modal-tabs-package"><i class="gi gi-package"></i>Details</a></li>' +
                '</ul>' +
                '</div>' +
                '<div class="modal-body">' +
                '<div class="tab-content">' +
                '<div class="tab-pane active" id="modal-tabs-package">' +
                '<h1 class="h2"><strong style="margin-left: 16px;">' +
                '<asp:Label ID="lbl_tourdetails_tour_name" Text="' + htourname + '" runat="server"></asp:Label></strong></h1>' +
                '<input type="hidden" id="htourid" value="' + htourid + '" />' +
                '<div class="col-lg-7">' +
                '<div id="project-carousel" class="carousel slide" data-ride="carousel" data-interval="2000">' +
                '<div id="divimages" class="carousel-inner text-center">' +
                maincontent +
                '</div>' +
                '<a class="left carousel-control" href="#project-carousel" data-slide="prev">' +
                '<span>' +
                '<i class="fa fa-chevron-left"></i>' +
                '</span>' +
                '</a>' +
                '<a class="right carousel-control" href="#project-carousel" data-slide="next">' +
                '<span>' +
                '<i class="fa fa-chevron-right"></i>' +
                '</span>' +
                '</a>' +
                '</div>' +
                '</div>' +
                '<asp:Label ID="lbldescription" Text="' + hdescription + '" runat="server"></asp:Label>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div class="modal-footer">' +
                '<h4 class="pull-left"><span class="text-muted"><b>Adult Price: </b></span><strong class="text-primary">' +
                '<asp:Label ID="lbl_viewadultprice" Text="' + hadultprice + '" runat="server"></asp:Label></strong>/</h4>' +
                '<h4 class="pull-left"><span class="text-muted"><b>Child Price: </b></span><strong class="text-primary">' +
                '<asp:Label ID="lbl_viewchildprice" Text="' + hchildprice + '" runat="server"></asp:Label></strong></h4>' +
                '<br />' +
                '<br />' +
                '<button type="button" class="btn btn-effect-ripple btn-success" onclick="Open_Addtocart_view(this)" style="background-color: #7DC402;"><i class="fa fa-shopping-cart"></i>Add to Cart</button>' +
                '<a  class="btn btn-effect-ripple btn-danger" style="background-color: #C43902;" data-dismiss="modal">Close</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
            $("#modaldiv").append(modaldiv);
            $('#modal-package').modal('show');
        }
    });
}

问题是，一旦我第一次单击任何 div“查看”按钮，即使我单击任何其他查看详细信息按钮，它也会继续在模式中显示相同的数据。如果我刷新页面，它会显示新数据，但同样的问题又会出现。

谁能帮我找出问题所在以及如何解决它？

Answer 1

在 append() 新的 HTML 之前，您需要清空模态框之前的内容。您可以使用 empty() 方法来完成此操作。试试这个:

$("#modaldiv").empty().append(modaldiv);