jQueryUI 选项卡在特定选项卡上显示（）？

Question

我一直在检查所有内容，但似乎无法找到如何使 show() 事件仅对特定选项卡做出反应？

我有以下选项卡：

<div id='tabs' class='ui-tabs'>
  <ul class='ui-tabs-nav'>
    <li><a href='#tabs-1'>tab 1</a></li>
    <li><a href='#tabs-2'>tab 2</a></li>
    <li><a href='#tabs-3'>tab 3</a></li>
  </ul>

  <div id='tabs-1'></div>
  <div id='tabs-2'></div>
  <div id='tabs-3'></div>
</div>

我希望 show() 事件仅对显示 id 1 做出反应。 是否可以？ :)

我的 JS 是：

$(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

usersAttachThis() 和 usersAttachRemove() 是 AJAX 回调函数。 因此，如果我更改选项卡，然后返回到我需要 delegate() 函数的选项卡，它将反应 3 次。

所以我需要说类似

if (tabSelected == "tabs-1") {
  $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
  $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
}

“OR”的东西，找另一个来做到这一点，而不是 delegate()？

Answer 1

如果可能的话，我很确定不可能，那么组件的一致性就会失效。相反，为什么不让“show”事件在脚本中调用“fauxShow”等函数，并在“fauxShow”中检查是否选择了 id="1" 的选项卡，然后调用函数“realShow”。

有多种方法可以做到这一点，但如果您能解释为什么只希望在一个选项卡上引发事件而不是在其他选项卡上引发事件，可能会有助于获得更好的答案。

Answer 2

$(function() { 
  $('#tabs').tabs({
    cookie: {expires: 1}, 
    show: function(event, ui) {
      $('#campaigns-attached').undelegate('li', 'dblclick');
      $('#campaigns-attached').delegate('li', 'dblclick', function() { $('#campaigns-non-attached').append(this); var id = this.getAttribute('id'); campaignsAttachRemove(id); });
      $('#campaigns-non-attached').undelegate('li', 'dblclick');
      $('#campaigns-non-attached').delegate('li', 'dblclick', function() { $('#campaigns-attached').append(this); var id = this.getAttribute('id'); campaignsAttachThis(id); });
      $('#users-attached').undelegate('li', 'dblclick');
      $('#users-attached').delegate('li', 'dblclick', function() { $('#users-non-attached').append(this); var id = this.getAttribute('id'); usersAttachRemove(id); });
      $('#users-non-attached').undelegate('li', 'dblclick');
      $('#users-non-attached').delegate('li', 'dblclick', function() { $('#users-attached').append(this); var id = this.getAttribute('id'); usersAttachThis(id); });
    }
  }).disableSelection();
});

我找到了答案:)
只需在使用 delegate() 选项之前使用 undelegate() 选项即可。那么就不会再触发两次了。