JQuery选项卡动态添加ajax

我是JQuery的新手,并且一直试图实现一个选项卡式接口,其中的选项卡是动态添加的,并且它们的内容是通过Ajax加载的。我正在使用JQuery-ui选项卡。我一直试图解决这个问题好几天,并且一直在Google上搜索,并在SO中阅读所有相关的主题。现在,如果我仅添加一个选项卡,则界面将起作用 - 选项卡已创建,已选中并且其内容通过Ajax加载。但是,当我添加第二个选项卡时,其内容似乎已正确加载,但是当我选择第一个选项卡时,我会看到第二个选项卡的内容附加到第一个选项卡的内容,然后我不能再在标签。

我正在使用Rails 3.代码在Coffeescript中,但我认为应该很容易阅读任何Javascript'er。以下是一些注意事项:

  • $('a.edit') is my selector to add the tab. To avoid multiple firings, I first check if the selector has already been bound before biding the adding of the tab with the mouse click
  • the tab close works well
  • the urls and tab name are passed as attributes. The urls point to html forms (via partials in Rails)
  • in the generated html, when I add a tab, two ui-tab-panel's are created with ids "ui-tabs-1" and "ui-tabs-2". The tab has an href that points to the second. Only the first has ".ui-tabs-hide".
    • when I add the second tab, I'll have four ui-tab-panel's, with the tabs pointing to "ui-tabs-2" and "ui-tabs-4", but none of them have ".ui-tabs-hide".

这是代码

$(->
        if !($('a.edit').is('.bound'))
            $('a.edit').on('click', ->
                addTab($(this).attr('url'), $(this).attr('tag'))  
            )
            $('a.edit').addClass('bound')
        $tabs = $('#tabs').tabs
        #$tabs.tabs
            closable: true
            cache: true
            tabTemplate: '
  • #{label} Remove Tab
  • '
                add: (event, ui) ->
                    $tabs.tabs('select', '#' + ui.panel.id)
    
            addTab = (url, tab_name)->
                $tabs.tabs('add',url,tab_name)
    
            $( "#tabs span.ui-icon-close" ).live(
                "click", ->
                    index = $( "li", $tabs ).index( $( this ).parent() )
                    $tabs.tabs( "remove", index )
    )
    
    0
    额外 编辑
    意见: 1

    1 答案

    To fix the problem, I introduced some minor changes. The major one was to add the line $tabs = $('#tabs') so all the references and method calls to tab should refer to the selector itself. I am not sure why, but before I had $tabs = $('#tabs').tabs( ... ). Another change was one needed in the cases where the selector $('a.edit') was added dynamically. Because the selector may not exist when the page is initally loaded, I changed the binding from .on('click,-> ) to .live('click', ->), and changed the flag so a new '.bounded' class is added to #tabs to prevent multiple firing.

    $(-> 
        $tabs = $('#tabs')
    
        if !($tabs.is('.bound')) 
            $('a.edit').live('click', -> 
                addTab($(this).attr('url'), $(this).attr('tag'))   
            ) 
            $tabs.addClass('bound') 
    
        $tabs.tabs 
            closable: true 
            cache: true 
            tabTemplate: '
  • #{label} Remove Tab
  • ' 
            add: (event, ui) -> 
                $tabs.tabs('select', '#' + ui.panel.id) 
    
        addTab = (url, tab_name)-> 
            $tabs.tabs('add',url,tab_name) 
    
        $( "#tabs span.ui-icon-close" ).live( 
            "click", -> 
                index = $( "li", $tabs ).index( $( this ).parent() ) 
                $tabs.tabs( "remove", index ) 
    ) 
    
    0
    额外