javascript - 使用 jQuery ajax 响应 html 更新 div 不回页

Question

我已经为此苦苦挣扎了几天，但不明白为什么这行不通。我需要使用新文件更新页面上的链接。发布请求和新文件显示在 Google Chrome 开发网络中，但实际页面不会更新。我查过other posts并且无法弄清楚这一点。我的理解是，我的代码应该使用新链接、图像等更新 div“mapData”。开发窗口中的页面响应具有正确的 html 页面，我需要从中获取 div 部分，在显示 html 页面，并更新该页面。应该很简单!

function updatePieFact(){
        var scenario = $("#scenario").val();
        var year_run = $("#year_run").val();
        var actType = $("input:radio[name=actType]:checked").val();
        var znType = $("input:radio[name=znType]:checked").val();
        var data = {'pieFact': pieFact, 'csrfmiddlewaretoken':'f89lua2QMAt7oz6057PVcahr3EUsSTyI', 'scenario':scenario, 'year_run':year_run, 'actType':actType, 'znType':znType};
        $.post(URL, data, function(data){
            var result = $('<div />').append(data).find('#mapData').html();
            $("#mapData").html(result);
        });
    }
    var pieFact = 1;
    $(document).ready(function(){
        $('#bttnMinus').click(function(){
            pieFact*=0.75;
            updatePieFact();
        });
        $('#bttnPlus').click(function(){
            pieFact*=1.25;
            updatePieFact();
        });
    });

Answer 1

你是想这么做吗？

$.post(URL, data, function(result){
    var mapDataHtml = $(result).find("#mapData").html();
    $("#mapData").html(mapDataHtml);
});

如果您的按钮位于 mapData 元素内部，则当您重新加载 html 时，它们的绑定(bind)将被删除。您需要使用 jQuery.on而不是点击。

$(document).on('click', '#bttnMinus', function(){
    pieFact*=0.75;
    updatePieFact();
});