2011-10-07 191 views
0

我一直在检查一切,但似乎无法找到如何使show()事件只对特定选项卡作出反应?jQueryUI选项卡显示()在特定的选项卡上?

我有以下标签:

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

,我想秀()事件只对显示是否有可能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回调函数。 所以,如果我改变标签,然后回到我需要委托()函数的选项卡,它会反应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,找到另一个要做到这一点,而不是委托()?

+1

(请使用大写字母i指自己而不是变量,谢谢!) – Arjan

回答

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

我找到了答案:) 只需使用undelegate()选项使用委托()选项之前。然后它不会发射两次。

1

如果有可能,并且我确信它不是,它会使组件的一致性失效。相反,为什么你没有“show”事件在你的脚本中调用一个函数,比如“fauxShow”和“fauxShow”,检查是否选择了id =“1”的选项卡,然后调用函数“realShow”。

有几十种方法可以做到这一点,但如果您能解释为什么您只想在一个选项卡上提出事件而不是其他选项,则可能会有更好的答案。

+0

刚刚编辑了问题以显示更多代码和更好的解释:) – Behrens

+0

您需要将匿名函数中的“if”您正在分配到“dblclick”事件。一旦你叫'$“(elem)。委托(....);'那么每次发生“dblclick”事件时都会调用匿名函数。 –

+0

在做新委托之前,我找到了答案,只是做了undelegate :)感谢您的帮助:) – Behrens

相关问题