如何在点击时重新加载 div 内容答案

【问题标题】：How to reload div content on click如何在点击时重新加载 div 内容
【发布时间】：2014-07-12 19:34:07
【问题描述】：

我有一个将内容加载到 div 中的 jQuery 脚本。当您单击菜单项时，内容会在“contentarea”内加载，并且 URL 会更新。那部分工作得很好。但是，我还希望能够单击 div 内部（一旦将内容加载到其中），然后在其位置加载另一个页面。例如，表单页面被加载到 contentarea 中，在表单页面内部有一个指向联系我们页面的链接。当我单击链接时，我希望从内容区域中清除表单页面，并在其位置加载联系我们页面。见下图：

按照我现在的脚本设置方式，只有在我从 div 外部单击时才会加载内容。

这是我需要修改的代码：

<script type="text/javascript">
//Jquery loader
function getHash() {
    return window.location.hash
}

$("a").on("click", function (e) {

    page = this.href.replace("#", "") + ".html",
        hash = $(this).prop("hash");


    $('#contentarea').load(page, function () {
        if (page.match("home.html")) {
            history.pushState('', document.title, window.location.pathname);
        } else {
            location.hash = hash;
        };



    });

});

//on pageload

history.pushState
var hash = getHash();
if (hash) {
    $("a[href='" + hash + "']").trigger("click");
} else {
    $("a[href='#home']").trigger("click");
}
</script>

任何帮助将不胜感激！

【问题讨论】：

这能回答你的问题吗？ Onclick reload the div only

标签： javascript jquery ajax

【解决方案1】：

由于您使用的是 jQuery，我建议这样做：

$(document).ready(function() {
    $(document).on( 'click', 'a', function( e ) {
        $('#contentarea').load( e.target.href );
    });
});

但是，如果您正在创建一个应用程序，并且您正在全局应用它，那么在您的情况下，我会重新考虑您的结构，以避免以后对您的代码进行重大更改。我已经传递了这一点，因为您必须管理 states（页面/状态的变量，如果它们存在的话：例如错误、标题、url 和明显的内容）并确定它们中的哪些是活动的或不活动的是否传递到下一页。然后你必须过滤你不想传播给你的历史状态处理程序的链接，因为你只是不想......

在某些情况下，您不能在项目中应用现有框架，因为最好的方法是在您的框架上使用它们的代码（是的，创建您自己的框架）。

希望对你有帮助！ :)

【讨论】：