jquery .load() 刷新后相同的内容答案

【问题标题】：jquery .load() same content after refreshjquery .load() 刷新后相同的内容
【发布时间】：2013-11-07 07:35:47
【问题描述】：

我有简单的内容加载器，我将 html 文件的内容加载到元素中。那工作正常。但是当我加载内容时，内容中的 JS 并没有加载，因为它是在 main (index.html) 文档就绪函数中定义的。

问题：

如何加载页面刷新后仍保留在 div 中的内容？

注意：首选 JS 解决方案。

HTML：

index.html

<ul id="debug_menu">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
</ul>

<div id="zone"></div>

JS：

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery('#zone').load('content/' + $content + '.html');

    });

});

//Edit:

jQuery(".dial").knob();

content1.html：

<input value="90" class="dial">

注意：使用http://anthonyterrien.com/knob/插件

【问题讨论】：

页面刷新后，我认为您无法再将内容存储到您的 div 中。如果你使用session或者cookies，试着把你的数据放到Session里面，页面刷新的时候div可以取出来
“内容中的JS未加载”是什么意思？可以分享一下内容代码吗？
如果 JS 存在于索引中而不是为什么你必须加载?????
@UziKilon 我添加了content1.html 向您展示那里有什么。如您所见，我在其中加载了.knob() 函数，当我将load() 内容放入div 时，它没有加载。
@rajeshkakawat 查看编辑。当我将内容加载到 div 时，没有加载 content1.html 中的 JS .knob()。

标签： javascript jquery html css

【解决方案1】：

试试这样的

        jQuery(document).ready(function() {
            jQuery("#debug_menu li").click(function() {
                $content = jQuery(this).text();
                jQuery('#zone').load('content/' + $content + '.html', function() {
                    jQuery(".dial").knob();//initialize new one
                });

            });

        });
        jQuery(".dial").knob();

编辑代码

            jQuery(document).ready(function() {
                jQuery("#debug_menu li").click(function() {
                    $content = jQuery(this).text();
                    jQuery('#zone').load('content/' + $content + '.html', function() {
                        initial_loader();//initialize new one
                    });

                });
                initial_loader();
            });
            function initial_loader(){
                jQuery(".dial").knob();
            }

【讨论】：

您的建议有效，但我有很多 javascript 和很多内容要加载，对于我来说，为了加载内容而再次加载所有 JS 不是可选的解决方案。 +1 努力。
只需创建函数并加载该函数

【解决方案2】：

当您加载内容时，您还应该以一种不会导致重新加载的方式操作当前页面的 URL。这基本上意味着更改哈希部分（#something）。在页面加载时，您只需检查当前哈希并加载正确的内容。

您也可以使用具有相同逻辑的history API，它为您提供了更多选项来操作 URL 的任何部分而无需重新加载。 Browser support 虽然还不是最好的，但您可以使用 history.js 作为包装器。

优点：除了解决重新加载问题之外，这两种方法都可以使您的内容可链接并使浏览器历史记录可用（后退、前进按钮都可以使用）。

【讨论】：

【解决方案3】：

不可能。您必须存储加载了哪个 div 等。可以存储东西的解决方案：

饼干
本地存储
标签

【讨论】：

【解决方案4】：

我用这个插件：https://github.com/AlexChittock/JQuery-Session-Plugin

将内容变量存储到会话中。

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery.session.set('content', $content);
        jQuery('#zone').load('content/' + $content + '.html',
                function() {
                    initial_loader();
                }
        );

    });

    $s = jQuery.session.get('content');
    jQuery('#zone').load('content/' + $s + '.html',
            function() {
                initial_loader();
            }
    );

});

function initial_loader() {

    jQuery(".dial").knob();

}

【讨论】：