JQuery 选项卡动态添加 ajax

Question

我是 JQuery 的新手，一直在尝试实现一个选项卡式界面，其中选项卡是动态添加的，并且它们的内容是通过 Ajax 加载的。我正在使用 JQuery-ui 选项卡。几天来我一直在尝试解决这个问题，并且一直在谷歌搜索并阅读 SO 中的所有相关线程。现在，如果我只添加一个选项卡，界面就可以工作——创建选项卡，选择它，并通过 Ajax 加载它的内容。但是，当我添加第二个选项卡时，它的内容似乎已正确加载，但是当我选择第一个选项卡时，我看到第二个选项卡的内容附加到第一个选项卡的内容中，然后我不再能够在选项卡。

我正在研究 Rails 3。代码在 Coffeescript 中，但我认为任何 Javascript'er 都应该易于阅读。以下是一些注意事项：

• $('a.edit') 是我添加标签的选择器。为了避免多次触发，我首先检查选择器是否已经绑定，然后再通过鼠标单击添加选项卡
• 标签关闭效果很好
• url 和选项卡名称作为属性传递。 url 指向 html 表单（通过 Rails 中的部分）
• 在生成的 html 中，当我添加一个选项卡时，会创建两个 ui-tab-panel，其 ID 为“ui-tabs-1”和“ui-tabs-2”。该选项卡有一个指向第二个的 href。只有第一个有“.ui-tabs-hide”。
  • 当我添加第二个选项卡时，我将有四个 ui-tab-panel，这些选项卡指向“ui-tabs-2”和“ui-tabs-4”，但它们都没有“.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: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>'
            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 )
)

Answer 1

为了解决这个问题，我做了一些小的改动。主要的一个是添加行$tabs = $('#tabs')，因此所有对选项卡的引用和方法调用都应该引用选择器本身。我不知道为什么，但在我有$tabs = $('#tabs').tabs( ... ) 之前。在动态添加选择器$('a.edit') 的情况下，需要进行另一项更改。因为页面初始加载时选择器可能不存在，所以我将绑定从.on('click,-> ) 更改为.live('click', ->)，并更改了标志，因此在#tabs 中添加了一个新的'.bounded' 类以防止多次触发。

$(-> 
    $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: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>' 
        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 ) 
)