为什么这个 html 不使用 jQuery 更新？答案

【问题标题】：Why is this html not updating using jQuery?为什么这个 html 不使用 jQuery 更新？
【发布时间】：2011-11-12 14:35:21
【问题描述】：

我有一个标准的 jQuery ajax 函数：

$.ajax({ 

    // blah blah...

    success: function(data) 
    {
        if(data) 
        {
            $('.title').text(data.title);
            $('.description').text(data.description);
            if (data.image) 
            {
                $('div#image').html('<a href="'+data.image+'" class="button">View Image</a>');                      
            }
        }
    }

});

服务器响应是一个 json 对象。 data.image 返回图像位置的 url。我只是将其粘贴在链接中并将其粘贴在 div 中。

每次用户单击图库上的“下一个”或“上一个”按钮时，都会运行此 ajax 调用。问题是，在第一次加载该链接后，它会保持缓存或其他状态，因为即使我单击下一个或上一个并且其他所有内容（如标题和描述）都更新了，该链接也不会更新。它总是指向第一张图片。

真正奇怪的是，如果我替换它：

$('div#image').html('<a href="'+data.image+'" class="button">View Image</a>');

与：

$('div#image').html(data.image);

它工作正常，每次运行 ajax 调用时都会加载一个新的 url。但是如果我把它放在一些 html 中，那么它会加载一次并保持缓存或其他东西。

有人知道为什么会这样吗？

【问题讨论】：

我怀疑这是你的问题，但你不应该只是将data.image 连接到你的 HTML 字符串中。想想如果data.image 包含引号或任何其他在 HTML 中具有特殊含义的字符会发生什么。相反，您可能希望设置没有href 的HTML，然后找到创建的a 元素并使用attr 设置href。
您是否将事件侦听器附加到#image a？

标签： javascript jquery html ajax json

【解决方案1】：

Tom，这里没有足够的信息来真正确定问题所在，但如果简单地引用 data.image 本身就可以正常工作，为什么不改写你的函数以这样使用它。

$.ajax({ 
    // blah blah...
    success: function(data) 
    {
        if(data) 
        {
            $('.title').text(data.title);
            $('.description').text(data.description);
            if (data.image) 
            {
                $('div#image a').attr('href',data.image);                      
            }
        }
    }
});

【讨论】：

【解决方案2】：

$.ajaxSetup({ cache: false });

尝试在调用之前将其放在脚本中的某个位置

或者在你的 $.ajax 调用中放一个参数

cache: true

【讨论】：