Question

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()?

Answer 1

$(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.