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

发布于 2024-08-27 05:04:19 字数 948 浏览 3 评论 0原文

我想调用一个回调方法，该方法可能会也可能不会在通过 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
    }
}

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

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

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

谢谢， ES

原文

I want to call a callback method that may or may not be implemented in pages being loaded as Ajax content by jQuery tabs. In other words, I have a set of jQuery tabs that load content rendered in JSP files. Some of these files have additional Ajax content in them, some don't.

What I could do is:

$(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
            }
        }
    });
});

But that has a few drawbacks - all the callbacks must be declared in scripts embedded in my main tabs page, along with anything they may depend on - not elegant! Also, I would like to be able to call the same callback, so as to avoid a page by page if/else statement. In short, I would like to have something like

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

Sadly, I could not figure out how to call script functions declared in the content. As noted in other threads, Javascript is not loaded by jQuery.

Apparently an option must be set for this, but I could not find out which.

And if the option was set and JS loaded, how would I access the functions? Would it be ui.panel.funcname(); ?

Thanks,
ES

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痞味浪人 2024-09-03 05:04:19

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 will not load script content located in the header of the document being loaded via AJAX, but it will load script content from the body. The easiest way to handle this if you don't want the code on the main page (using live handlers) is to have your main page load any external script files required by any tabs and have the content for each tab contain the "callback" mechanism for what needs to be done when the tab is loaded. You need to be careful, realizing that all tabs may be loaded in the DOM at once necessitating naming distinctions between tabs and, perhaps, qualifying any selectors so that they are relative to the tab container, but it is doable.

Ex.

  <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>

回复收藏 0 原文

~没有更多了~