开发者

Dynamic tab in jquery fails to be selected after creation

I am creating a dynamic tab via an "tab-add" button.

The "tab-add" button is appended to the end of the tab and then the tab is initialised, e.g.

$('#tabs').sortable({
    create: function( event, ui ) {
        $tabs = $( '#tabtab' ).tabs({
            create: function(event, ui) {
                $('#tabs').append( '<li id="tab-add" class="noSort"></li>' );
            },
            add: function( event, ui ) { ...

Dynamic tab in jquery fails to be selected after creation

When the "tab-add" button ( which is in fact an li ) is clicked a new tab is created using the .tabs( 'add', href, input ) notation. I then inject an input field into this generated tab li. This removes the default generated link within the newly created li.

Dynamic tab in jquery fails to be selected after creation

<li id="tab-1">
    <input type="text" id="tab-input"></input>
</li>

Dynamic tab in jquery fails to be selected after creation

This works fine when the input loses focus the information gathered in the input is posted to a database and the correct li syntax is returned into id "tab-1".

<li id="tab-1">
    <a href="#tabs-1">The Name of My New Tab</a>
</li>

Now, this is where I get stuck.

The correct tab is selected (seen above) and the panel is showing, however when I click on another already created tab and then click back on my just generated tab the tab will not select (see below). When I try to click the "The Name Of My New Tab" tab it doesn't select (highlight).

Dynamic tab in jquery fails to be selected after creation

This has something to do with the fact that the content of "tab-1" was dynamically generated and the tab has not regenerated itself. Since, if I go ahead and add another new tab the tab starts to work fine. I don't want to do a page refresh I just want that tab to work immedi开发者_开发百科ately after its been generated. I've tried selecting, loading and enabling the tab with no effect.

Is there a slick way to regenerate the tabs after this dynamic approach?

I hope this read has not been too dull! Any help would be much appreciated.


Okay, I get it now. The problem is that when you add a new tab, the jquery.ui code is attaching a bunch of handlers to that tag that you are then replacing. Instead of replacing this tag, just hide it. Then when the input loses focus, change the text inside that which was created by jquery.ui and show it again. This way you keep all the handlers attached by jquery.ui.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜