Reputation: 1798
I've been checking everything, but cant seem to find how to make the show() event only react on a specific tab?
I have the following tab:
<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>
And i want the show() event only to react on showing id 1. Is it possible? :)
My JS are:
$(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();
});
The usersAttachThis() and usersAttachRemove() are AJAX callback functions. So if i change tab and then go back to the tab where i need the delegate() function, it will react 3 times.
So i need to say something like
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, find another to do this, instead of delegate()?
Upvotes: 0
Views: 1003
Reputation: 1798
$(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();
});
I found the answer :) Just use the undelegate() option before using the delegate() option. Then it won't fire twice.
Upvotes: 0
Reputation: 2322
If it were possible, and I'm pretty sure it's not, it would invalidate the consistency of the component. Instead why don't you have the "show" event call a function in your script like "fauxShow" and in "fauxShow" check if tab with id="1" was selected and then call function "realShow".
There are dozens of ways to do that, but it might help to get a better answer if you could explain why you only want the event raised on the one tab and not the others.
Upvotes: 1