Why does ui-state-disabled get applied to my elements dynamiclly?

Question

I have an add button for adding new tabs. The tab list is also sortable.

When clicking the button to add a new tab it gets "ui-state-disabled" added to its class dynamically. It's pretty annoying.

The add button is part of the tab. I am dynamically adding it after my tabs have rendered.

$('#tabs').append('<li id="tab-add" class="noSort"><a href="#" alt="Add Tab" title="Add Tab" class="add-tab"></a></li>');

Is there a reason why ui-state-disabled gets added and can I turn it off?

In firebug I can clearly see ui-state-disabled is added after noSort.

Thank you.

Answer 1

Your tab has no href attribute (# actually), which makes jQuery-UI tabs() method to disable it:

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.tabs.js#L264

Answer 2

try this
$("#your ul id > li:has(a[href])").removeClass("ui-state-default ui-corner-top").css("font-weight","normal");