javascript - jquery .load() 刷新后相同的内容

Question

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

问题：

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

注意：首选 JS 解决方案。

HTML：

索引.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();

内容1.html：

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

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

Answer 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();
            }

Answer 2

我使用这个插件：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();

}

Answer 3

不可能。您必须存储加载了哪个 div 等。您可以存储某些内容的解决方案：

1. 曲奇饼
2. 本地存储
3. 井号

Answer 4

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

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

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