使用 jQuery ajax 响应 html 更新 div Not Posting Back to Page答案

【问题标题】：Update div with jQuery ajax response html Not Posting Back to Page使用 jQuery ajax 响应 html 更新 div Not Posting Back to Page
【发布时间】：2014-06-19 16:38:31
【问题描述】：

我已经为此苦苦挣扎了几天，无法弄清楚为什么这不起作用。我需要用新文件更新页面上的链接。发布请求和新文件显示在 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();
        });
    });

【问题讨论】：

打开Chrome开发者工具，在该行下一个断点： var result = $('
').append(data).find('#mapData').html() ;在控制台中，键入“$('
')”并按 Enter。这将为您提供您尝试将数据附加到的 div，并且是一个很好的起点。

标签： javascript jquery html ajax http-post

【解决方案1】：

你的意思是这样做吗？

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

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

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

【讨论】：

这几乎可以工作。我只需要过滤“结果”，使其不包含整个 html。
我可以让它过滤并工作，但它只能工作一次。我的猜测是后续请求中的响应数据不完整。
您的结果是否包含一个 ID 为“mapData”的元素，您想用它来更新页面的“mapdData”元素？如果是这样，请参阅我的编辑。
确实如此。以上工作一次，但响应中缺少某些内容并且不会再次更新。
谢谢。 Jquery 正在运行不同的代码，因为它将它作为第二个请求读取并传递了一个错误。这是事件委托的问题。将 $('#bttnMinus').on('click', function() 更改为 $(document).on('click', '#bttnMinus', function() 有效。learn.jquery.com/events/event-delegation

【解决方案2】：

您可以使用http://api.jquery.com/load/ 稍微简化一下。您的问题可能在于您如何设置html。

$('#mapData').load(URL, data);

【讨论】：