0

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

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

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

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

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

我决定清醒一下，实现一个漂亮的 jquery 自动完成文本字段。

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

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

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

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

显然我做错了什么。

请挑选我的代码并告诉我我做错了什么。

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

3 回答 3

2

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

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

好的，根据您的说明，我现在意识到问题是您有多个“标题”和“角色”实例，但您使用 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>

仍然不确定是否需要对焦点进行超时。如果它只是试图“使某些东西起作用”，您应该删除它。

于 2009-12-26T06:35:13.420 回答
2

我相信问题是您没有唯一的 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，并且#rolejQuery 停止搜索重复项（这是正确的）。因此，简单的解决方案是将它们设为类，然后让 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然后一旦淡出效果完成，回调函数会从页面（和 DOM）中删除元素

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

此外，如果您不熟悉.end()它，您可以链接对象。更具体地说，它将选择器恢复为最新的对象，在这种情况下是ui.panel. 在此处阅读更多相关信息，并确保在.andSelf() 此处查看。

于 2009-12-26T13:40:18.087 回答
-2

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

于 2009-12-26T03:24:46.563 回答