JQuery選項卡動態添加ajax

我是JQuery的新手，並且一直試圖實現一個選項卡式界面，其中的選項卡是動態添加的，其內容是通過Ajax加載的。我正在使用JQuery-ui選項卡。我一直在努力解決這個問題好幾天，並且一直在Google上搜索，並在SO中閱讀所有相關的主題。現在，如果我只添加一個選項卡，界面就可以工作 - 創建選項卡，選擇選項卡，並通過Ajax加載其內容。但是，當我添加第二個選項卡時，其內容似乎已正確加載，但是當我選擇第一個選項卡時，我會看到第二個選項卡的內容附加到第一個選項卡的內容，然後我不能再在標籤。JQuery選項卡動態添加ajax

我正在使用Rails 3.代碼在Coffeescript中，但我認爲應該很容易閱讀任何Javascript'er。以下是一些注意事項：

$('a.edit')是我的選擇器添加選項卡。爲了避免多次發射，我首先檢查選擇器是否已被綁定，然後用鼠標點擊添加標籤
該標籤關閉效果不錯
該url和標籤名稱作爲屬性傳遞。網址指向html表單（通過Rails中的partials）
在生成的html中，當我添加一個選項卡時，兩個ui-tab面板用id「ui-tabs-1」和「ui-tabs-2 」。該選項卡具有指向第二個的href。只有第一個有「.ui-tabs-hide」。
- 當我添加第二個選項卡時，我將有四個用戶界面面板，其中的選項卡指向「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) 
)

來源

2012-05-24 user1413880

要解決這個問題，我介紹了一些細微的變化。最主要的是添加行$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) 
)

來源

2012-05-24 22:21:12 user1413880

JQuery選項卡動態添加ajax

回答

相關問題