Question

我有一个基于jquery工具的选项卡工作得很好，在每个选项卡上我使用ajax加载页面。其中一个页面有来自另一方的工具，这需要在准备好时运行以下代码：

$(function() { $('.scroll-pane').jScrollPane({showArrows: true}); });

我要注意放置此代码的位置（在ajax加载页面中）。据流动玩家说：

“脚本标记应放在不在document.ready（）事件内的HTML元素下面，因为对于使用AJAX加载的页面不会触发该事件。”

这是否意味着将上述内容封装在<script></script>代码中，并放在</html>代码之后？那是在整个文档之外所以它似乎不对......

帮助任何人...我应该将我的初始化代码放在ajax doc中吗？

由于

Answer 1

将其作为AJAX加载的回调运行，这样代码将在HTML加载到DOM后运行。

$('#result').load('ajax/test.html', function() {
  $(function() { $('.scroll-pane').jScrollPane({showArrows: true}); });
});

在API for load()中阅读更多内容。

Answer 2

这是一个很长的镜头，但我很确定你可以利用onClick事件。我相信这是在加载标签内容后触发的，即使是通过AJAX也是如此。你会写这样的东西：

$("ul.tabs").tabs("div.panes > div", {
    effect: 'ajax',
    onClick: function(event, index) {
        $('.scroll-pane').jScrollPane({showArrows: true});
    }
});

我希望这适合你。如果确实如此，则严重无证。

Answer 3

如果我理解您的问题，将有两种方法可以解决此问题。

a）在选项卡加载之前加载脚本，因此您不应等待脚本加载

b）将脚本动态加载到主页并调用回调

如果是b，你应该这样做：

 function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementById('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

对我来说是结构问题，而不是脚本问题。这意味着，在ajax调用中加载WHEN / HOW / WHERE选项卡数据和脚本。如果您在这种情况下共享演示链接，则更好的方法是。我很乐意帮忙。

如果我理解您的问题，请告诉我

jquery工具：在ajax加载的脚本中调用doc ready初始化

3 个答案: