JQuery选项卡动态添加ajax

我是JQuery新手，一直在尝试实现一个选项卡式界面，其中动态添加选项卡，并通过Ajax加载其内容。我正在使用jQueryUI选项卡。我已经试着解决这个问题好几天了，我一直在谷歌上搜索，阅读所有相关的文章。现在，如果我只添加一个选项卡，界面就可以工作了——创建选项卡，选择它，并通过Ajax加载其内容。但是，当我添加第二个选项卡时，它的内容似乎已正确加载，但是当我选择第一个选项卡时，我看到第二个选项卡的内容附加到第一个选项卡的内容，然后我就无法在选项卡之间切换

我在Rails 3上工作。代码是用Coffeescript编写的，但我认为对于任何Javascript用户来说都应该很容易阅读。以下是一些注意事项：

$'a.edit'是我添加选项卡的选择器。为了避免多次触发，我首先检查选择器是否已绑定，然后用鼠标单击添加选项卡 tab close运行良好 URL和选项卡名称作为属性传递。URL通过Rails中的部分指向html表单 在生成的html中，当我添加一个选项卡时，会创建两个ui选项卡面板，分别使用ids ui-tabs-1和ui-tabs-2。该选项卡有一个指向第二个的href。只有第一个选项卡隐藏了.ui选项卡。 当我添加第二个选项卡时，我将有四个ui选项卡面板，选项卡指向ui-tabs-2和ui-tabs-4，但它们都没有.ui选项卡隐藏。 这是密码

$(->
        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 )
)

---

为了解决这个问题，我引入了一些小改动。主要的一个是添加行$tabs=$'tabs'，因此对tab的所有引用和方法调用都应该引用选择器本身。我不知道为什么，但在我有$tabs=$'tabs'。tabs。在动态添加选择器$'a.edit'的情况下，需要进行另一项更改。由于初始加载页面时选择器可能不存在，我将绑定从.on'click、->更改为.live'click'，->，并更改了标志，以便在选项卡中添加一个新的.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 ) 
)