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

或者，找另一个做这个，而不是委托（）？

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（）选项。然后它不会发射两次。

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

2 个答案: