Javascript 无法使用新数据进行刷新

我有一个页面，其中所有数据都是从数据库动态加载的，并以divs显示。在每个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');
        }
    });
}

函数获取详细信息（par）{
var modaldiv=“”；
var maincontent=''；
VAR HUTIDID =文档.GETelEnMyBid（“HUTIDID”+PAR ID）值；
var HulultPrase=文档.GETelEnMyBid（“HaultTalk”+ PAR.ID）。
VaR HealPals=文件.GETelEnMyBid（“HCHALVER PRODE”+PAR ID）值；
VaReStase=文档.GETelEnMyBid（“HeDealth+Pal.ID”）值；
var HuNeNe=文档.GETelEnMyBid（“HuToNeNe+PAR.ID”）值；
$.ajax({
键入：“获取”，
url:“XXXXXXXXXX”+htourid，
数据类型：“json”，
contentType:“应用程序/json”，
成功：功能（数据）{
var rowcount=1；
对于（var i=0；i”+
“
”+
“”+
'' +
'' +
'' +
'' +
“'+
“/”+
'子价格：'+
“”+
“
”+
“
”+
“添加到购物车”+
“结束”+
'' +
'' +
'' +
'';
$（“modaldiv”）。追加（modaldiv）；
$（'modal package'）.modal（'show'）；
}
});
}

问题是，当我第一次单击任何divs“View”按钮时，即使在我单击任何其他View details按钮之后，它仍会在model中显示相同的数据。如果我刷新页面，它会显示新数据，但同样的问题会继续出现

---

有人能帮我找出问题所在以及解决方法吗？

在添加新的HTML之前，您需要清空模式的先前内容。您可以使用

empty（）

方法来实现这一点。试试这个：

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

---

您是否尝试过使用

$（“#modaldiv”）.empty（）

清空之前显示的模式的内容？不，我没有尝试过，我会尝试一下，然后回复您，非常感谢！！非常感谢@Rorymcrossan，它的效果非常好@RoryMcCrossan您好，这里是prashant，我有另一个问题，先生，请帮我解答一下，我有一个函数，它有ajax post，在这个ajax post中，我调用另一个ajax函数，返回一些值，但问题是在tht循环中，另一个函数只执行了一次，我发现主线程上的XMLHttpRequest错误已被弃用，因为它会对最终用户的体验产生有害影响。您最好为这个问题开始一个新的问题。