javascript - ContentEditable HTML5 localStorage 有时不起作用

Question

我尝试将此演示中的“ContentEditable”用于我网站的 3 个 div:

http://html5demos.com/contenteditable

我还从这个演示中为事件监听器加载了 h5utils.js

例如，其中一个 div 看起来像这样:

<div class="statsWrapper">
    <header id="met30" contenteditable="true" class="Tester">
</header>
    <p class="statsmonth_tester">
       Tester Overall
    </p>
</div>

我在 html 中的脚本

        <script>
        //Script for saving Content Sales Report to local storage//

        var editableTester = document.getElementById('met30');
        var editableSubscriber = document.getElementById('met32');
        var editableReadOnly = document.getElementById('met35');

        addEvent(editableTester, 'blur', function() {
            localStorage.setItem('Tester', this.innerHTML);
            document.designMode = 'off';                
        });

        addEvent(editableSubscriber, 'blur', function() {
            localStorage.setItem('Subscriber', this.innerHTML);
            document.designMode = 'off';
        });

        addEvent(editableReadOnly, 'blur', function() {
            localStorage.setItem('ReadOnly', this.innerHTML);
            document.designMode = 'off';
        });

        addEvent(editableTester, 'focus', function() {
            document.designMode = 'on';
        });
        addEvent(editableSubscriber, 'focus', function() {
            document.designMode = 'on';
        });
        addEvent(editableReadOnly, 'focus', function() {
            document.designMode = 'on';
        });

        if (localStorage.getItem('Tester')) {
            editableTester.innerHTML = localStorage.getItem('Tester');
        }
        if (localStorage.getItem('Subscriber')) {
            editableSubscriber.innerHTML = localStorage.getItem('Subscriber');
        }
        if (localStorage.getItem('ReadOnly')) {
            editableReadOnly.innerHTML = localStorage.getItem('ReadOnly');
        }               
    </script>

问题是:

我总是能够编辑 div 但有时 localStorage 在编辑它们后不会更新我的 div 的新值。 重新加载窗口后，所有值都是旧值。但这很奇怪:如果我在新窗口中打开代码，有时它会起作用。有任何想法吗？ (对不起我的英语)

Answer 1

是否在 DOM 完全加载后运行脚本？有很多方法可以实现这一目标。但最简单的可能是使用 jQuery (document).ready(//here comes your code)