Question

我想调用一个回调方法，该方法可能会也可能不会在由jQuery选项卡作为Ajax内容加载的页面中实现。换句话说，我有一组jQuery选项卡，用于加载在JSP文件中呈现的内容。其中一些文件中包含额外的Ajax内容，有些则没有。

我能做的是：

$(document).ready(function() {
    $("#menu").tabs( {
        cache: false,
        ajaxOptions: {cache: false},
        load: function(event, ui) {
            if (ui.index == index_of_tab_with_additional_content) {
                //call code defined in other places and embedded using <script> tags
            }
        }
    });
});

但这有一些缺点 - 所有回调必须在我的主标签页中嵌入的脚本中声明，以及它们可能依赖的任何内容 - 不优雅！另外，我希望能够调用相同的回调，以避免逐页if / else语句。简而言之，我想要像

这样的东西

load: function(event, ui) {
        callback();   //Each tab would implement this differently, or not at all
    }
}

可悲的是，我无法弄清楚如何调用内容中声明的脚本函数。如其他线程所述，JQuery不会加载Javascript。

显然必须为此设置一个选项，但我找不到哪个。

如果设置了选项并加载了JS，我将如何访问这些函数？它是ui.panel.funcname（）; ？

谢谢， ES

Answer 1

JQuery不会加载位于通过AJAX加载的文档标题中的脚本内容，但它将从主体加载脚本内容。如果您不希望主页上的代码（使用live处理程序），处理此问题的最简单方法是让主页加载任何选项卡所需的任何外部脚本文件，并使每个选项卡的内容包含加载选项卡时需要执行的操作的“回调”机制。您需要小心，意识到所有选项卡可能会立即加载到DOM中，需要在选项卡之间进行命名区分，并且可能限定任何选择器以使它们相对于选项卡容器，但它是可行的。

实施例

  <html>
  <head>
      ...
      <script type="text/javascript">
          // I'm not going to be loaded via AJAX
      </script>
  </head>
  <body>
  <div id="homeTab" class="tab-content">
       ...
       <a href="#" class="clickable button">Click Me</a>
       ...
  </div>
  <script type="text/javascript">
      $(function() {
          // here be stuff which runs when the tab is loaded
          var $tab = $('#homeTab');
          $('a.button',$tab).click( function() {
              ...do something...
              return false;
          });
      });
  </script>
  </body>
  </html>

调用由jQuery选项卡加载的内容页面中定义的函数

1 个答案: