1

我是 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-隐藏”。

这是代码

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

1 回答 1

0

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

$(-> 
    $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 ) 
)
于 2012-05-24T22:21:12.733 回答