页面重新加载时不显示动态内容答案

【问题标题】：Dynamic content is not displayed on page reload页面重新加载时不显示动态内容
【发布时间】：2015-05-13 10:24:36
【问题描述】：

加载页面后，我运行一个脚本，在该脚本中动态地将点击事件添加到我的隐藏按钮，并触发点击。这样，每次重新加载页面时，我都会强制 javascript 库重新加载。然后这个库发出请求，并以适当的方式显示响应。第一次加载页面时，会显示响应（突出显示选定的文本）。每次下一次，都会重新加载库，但不显示响应。我希望每次重新加载页面时都显示它。

我试过禁用缓存，用shift+f5刷新，还是没有成功。

这是我的代码：

<body>
    <div id="content">
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </div>      
    <input id="btn" type="button" hidden="true" />

    <script>
        function loadAnnotator() {

            var content = $('#content').annotator();
            console.log("Annotator loaded");

        };
        $(window).load(function () {

            var btn = $("#btn");             
            if(btn !== null && btn !== undefined) {

                btn.on('click', loadAnnotator);                    
                btn.click();
            }
        });
    </script>
</body>

我可以通过显示和手动单击此按钮使其工作，但这不是所需的行为。

我怎样才能让它按照我想要的方式工作？提前谢谢你。

【问题讨论】：

每个脚本在重新加载时都会自动执行，即使它被缓存，它也会被执行。整个方法对我来说似乎是错误的。关于点击和加载事件的问题也令人困惑。
这只是众多尝试中的一种，我已经尝试过等。任何其他可行的方法也可以。
为什么不直接调用那个函数。您正在添加一个侦听器，然后触发点击事件。
时间问题。不知何故，无论我做什么，我都说得太早了。需要加载 DOM。所以我尝试了 $(document).onready(loadAnnotator) 但这仍然没有显示我突出显示的文本。例如，这有效：

但它是如此明显......

标签： javascript jquery html

【解决方案1】：

试试这个 oneliner，而不是整个 hack：

$($('#content').annotator));

不需要隐藏按钮。如果这不起作用，则有可能在此脚本之后才初始化“注释器”。

【讨论】：

仍然 - 我更改了我的 jsp 的内容，注释在重新加载时很好地显示，但是当我再次重新加载时 - 没有注释（并且注释器被重新加载）

【解决方案2】：

问题在于btn.click(); 这在某些浏览器中不起作用！

JavaScript 来拯救像这样btn[0].click(); 或者你需要改变你的逻辑如下

  <body>
<div id="content">
    <div id="pdfContainer" class = "pdf-content">
    </div>
</div>      
<input id="btn" type="button" hidden="true" />

<script>

        var content =null;
    function loadAnnotator() { 
      if(content==null)content =$('#content').annotator();
        console.log("Annotator loaded");
    };
      function clickedButton(){
            loadAnnotator();
       }
    $(window).onLoad(function () {
        var btn = $("#btn");             
        if(btn !== null && btn !== undefined) {
            btn.on('click', clickedButton);     
            clickedButton();                   
        }
    });
</script>
</body>

【讨论】：

不，它的工作方式相同...只是加载第一个打开的页面，然后，是的，每次都加载注释器，但不会显示以前存储的注释...

【解决方案3】：

已解决：我添加了一个计时器并强制在 300 毫秒后单击按钮。

有点像这样：

   <body>
    <div id="content">
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </div>      
    <input id="btn" type="button" hidden="true" onclick="loadAnnotator()" />

    <script>

        var content = null;
        function loadAnnotator() {
            if (content === null) {
                content = $('#content').annotator();
            }
            console.log("Annotator loaded");
        }
        ;
        function clickedButton() {
            var btn = $("#btn")[0];
            if (btn !== null && btn !== undefined) {
                btn.click();
                console.log("Button is clicked");
            }
        }
        $(window).load(function () {
            setTimeout(clickedButton, 300);
        });

    </script>
</body>

另外，我听取了建议

var btn = $("#btn")[0];

有时，人们会忘记有关 jQuery 的这些基本知识 :) 如果我添加的时间少于 300 毫秒，它的行为方式就是我上面提到的。

谢谢大家！

【讨论】：