JQuery UI 选项卡回调不起作用

Question

在过去的 7 个小时里我一直在努力让它工作，所以请原谅我有点沮丧。

我已经成功实现了一组很好的 jquery ui 选项卡，它们通过 ajax 加载它们的内容。

通过 ajax 加载的内容具有表单。我希望在加载选项卡时自动聚焦表单中的第一个字段（其 ID 为#title）。当我尝试将脚本放入外部文档时这不起作用，所以我认为回调是个好主意。

setTimeout( function() { $("#title").focus(); }, 500 );

我从here 得到这个想法。延迟是因为我在单击每个选项卡时遇到了字段无法正确聚焦的问题。起初我认为这已经解决了一些问题，但经过更多测试我发现这个焦点字段仅适用于最初加载的选项卡。

我决定清醒一下，实施nice jquery autocomplete text field.

当直接加载到外部内容中时，该脚本似乎可以工作，但令我沮丧的是，进一步的测试表明情况并非如此。 自动完成字段仅适用于页面加载时加载的选项卡。

这时我注意到我的两个脚本只在初始加载的选项卡上运行的模式。

我尝试过使用选择、加载和显示事件，但都无法正常工作。

我知道回调正在工作，因为单击每个选项卡时都会出现警报。

显然我做错了什么。

请分解我的代码并告诉我我做错了什么。

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
         load: function(event, ui) { setTimeout( function() { $("#title").focus(); }, 500 );
                $("#role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );

            alert('callback');
                }
            });

        });
    </script>

Answer 1

我认为问题在于您没有唯一 ID。如果您的 HTML 与此类似：

<div class="tabs">
 <ul>
  <li><a href="tab1.htm">Tab1</a></li>
  <li><a href="tab2.htm">Tab2</a></li>
 </ul>
</div>

Tab 插件会将两个页面（tab1.htm 和 tab2.htm）加载到当前页面中。由于第一个选项卡同时具有#title 和#role jQuery 停止搜索重复项（正确地如此）。因此，简单的解决方案是将它们设为类，然后让 show 函数针对选定的选项卡并调用焦点和自动完成插件。

$(function(){
 $(".tabs").tabs({
  show: function(e, ui) {
   $(ui.panel)  // target the current tab contents
    .find('.title').focus().end()
    .find('.role').autocomplete(
      "/profile/autocomplete",
      {
       delay:10,
       minChars:1,
       matchSubset:1,
       matchContains:1,
       cacheLength:10,
       onItemSelect:selectItem,
       onFindValue:findValue,
       formatItem:formatItem,
       autoFill:true
      }
     );
  }
 });
});

为了回答您在评论中提出的问题，回调基本上是您在完成任何操作后想要发生的事情。例如，下面的函数将隐藏类hideme的元素，然后一旦fadeOut效果完成，回调函数从页面（和DOM）中删除元素

$('.hideme').fadeOut('slow', function(){
 $(this).remove();
})

此外，如果您不熟悉.end()，它允许您链接对象。更具体地说，它将选择器恢复为最新的对象，在本例中为ui.panel。阅读更多关于它的信息here，也一定要查看.andSelf()here。

Answer 2

从问题中您的问题并不完全清楚。我会说 $(document).ready 部分绝对不需要，但可能不会引起任何问题，因为我认为它会立即运行。

我不确定您是如何创建标签的，尤其是您所说的“仅在第一个标签加载时，加载另一个标签不会聚焦该字段”是什么意思。你说的负载到底是什么意思？选项卡是通过 Ajax 调用加载的，还是只是指页面呈现时？您是希望每个标签都关注特定元素，还是每次加载标签时都关注？ （您的代码说明了一个特定字段，但您的文字不清楚）。

好的，根据您的说明，我现在意识到问题是您有多个“title”和“role”实例，但您使用 ID 来命名和引用它们。在 html 中，你有这样的东西

<div id="tabs">
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    <div class="tab">
        <input id="title">
        <input id="role">
    </div>
    ...
    etc
</div>

问题是，“id”字段在所有元素中必须是唯一的，否则您只能引用其中一个（不仅仅是每个选项卡唯一）。因此，当您说 $('#title') 时，您只能引用 id 为 'title' 的第一个元素。许多人通过添加数字并为“tab1”、“tab2”等以及“title1”、“title2”等选项卡提供 id 来解决这个问题。这实际上是 jquery 的一个坏主意。您应该改为使用类和非常有用的 jquery .find() 方法，如下所示：

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs({
            load: function(event, ui) {
                var tab_content = $(ui.panel);
                setTimeout( function() { tab_content.find(".title").focus(); }, 500 );
                tab_content.find(".role").autocomplete(
                    "/profile/autocomplete",
                    {
                        delay:10,
                        minChars:1,
                        matchSubset:1,
                        matchContains:1,
                        cacheLength:10,
                        onItemSelect:selectItem,
                        onFindValue:findValue,
                        formatItem:formatItem,
                        autoFill:true
                    }
                );
                alert('callback');
            }
        });
    });
</script>

仍然不确定是否需要对焦点进行超时。如果它只是为了“让某些东西发挥作用”，你应该删除它。

Answer 3

不是 100% 确定，但可能是因为您将处理代码包装在 $(document).ready(function() { ... }); 中。