Question

$('li > a').click(function (event, ui) {
    location = $(this).attr('href');
    if (location != "gala") {
        actions.load_location(location);
    } else {
        actions.bp_gala();
    }
});

or

$("#tabs").tabs(show: function (event, ui) {
    switch (ui.index) {
    case 0:
        actions.load_location("home");
        break;
    case 1:
        actions.bp_gala();
        break;
    case 4:
        actions.load_location("barcelona");
        break;
    case 5:
        actions.load_location("cruise");
        break;
    }
    //window.location.replace(ui.tab.hash);
}
});

I’ve tried adding event.stopPropagation() but the event seems to bubble/tab sticks after first click. Tried it in $(Document).ready and all sorts of combinations but nothing seems to work. A little more information about this is I’m creating a second tab on the fly. When I reload a specific location I clear out the subTab and rebuild it. This is where I’ve narrowed the problem to.

Answer 1

$("#tabs").tabs({
show: function(event, ui) { 
switch(ui.index)
{
case 0:
$('#home').html('<div id="homeSubtabs"><ul></ul></div>');
actions.get_job_list("home");
  break;
case 1:
actions.bp_gala();
  break;
case 4:
$('#barcelona').html('<div id="barcelonaSubtabs"><ul></ul></div>');
actions.get_job_list("barcelona");
  break;
case 5:
$('#cruise').html('<div id="cruiseSubtabs"><ul></ul></div>');
actions.get_job_list("cruise");
  break;
}
       //window.location.replace(ui.tab.hash);
}
});

Solved it! Turns out when creating subtabs on the fly, you need to clear the content from outside of the function I was calling. As you can see the div inside the switch.