Question

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

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

$('a.edit')是我添加标签的选择器。为了避免多次点火，我首先检查选择器是否已被绑定，然后再单击鼠标添加选项卡
标签关闭效果很好
网址和标签名称作为属性传递。网址指向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 )
)

Answer 1

为解决这个问题，我介绍了一些小改动。主要的是添加行$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 ) 
)

JQuery选项卡动态添加ajax

1 个答案: