Question

我有简单的内容加载器，我将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/插件

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

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

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

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

Answer 3

不可能。你必须存储哪个div加载等。可存储内容的解决方案：

曲奇
localStorage的
主题标记

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

}

jquery .load（）刷新后的内容相同

问题：

4 个答案: