如果添加div，jQuery UI不適用

我有一個jqueryUI的問題。我注意到，當我將內容附加到頁面時，UI似乎不起作用。我嘗試this的例子，它似乎按預期工作，但是當我試圖擴展它沒有運氣。如果添加div，jQuery UI不適用

我有這個在我的代碼

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Tabs - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#tabs").tabs(); 
    $('#tabs-1').click(function() { 
     $('.boo').load('boo.html'); 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
Hello World! 

    <div class="boo"> 

    </div> 
    </div> 
    <div id="tabs-2"> 

    </div> 
    <div id="tabs-3"> 

    <p>Some Test</p> 
    </div> 
</div> 


</body> 
</html>

我有這樣的boo.html

<div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tabb</a></li> 
    <li><a href="#tabs-2">More </a></li> 
    <li><a href="#tabs-3">iFinal</a></li> 
    </ul> 
    <div id="tabs-1"> 
     First Tab 
    </div> 
    <div id="tabs-2"> 
     Second Tab 
    </div> 
    <div id="tabs-3"> 
     Final Tab 
    </div> 
</div>

我期待看到的第一個標籤內的標籤。但這是我看到的

任何幫助，將不勝感激。

來源

2013-10-31 tawheed

你'.load（）'將創造大量的重複的ID。這是不允許的。 – Barmar

您應該添加$（「.boo #tabs」）.tabs（）;在加載內容之後在你的點擊事件中，因爲你的tabs（）函數在將來的元素上不起作用。

$("#tabs").tabs(); //this work only in the first id 
$('#tabs-1').click(function() { 
    $('.boo').load('boo.html', function() { 
     $(this).find("#tabs").tabs(); //after complete load, convert tabs inside .boo 
    }); 
});

編輯。此外，你必須在不同的每個選項卡集名稱** Fiddle **

你boo.html應該看起來更像這個（因爲HREF =＃標籤-1的開ID =標籤-1，使他們不能重複）：

<div id="subtabs"> 
    <ul> 
     <li><a href="#subtabs-1">Tabb</a></li> 
     <li><a href="#subtabs-2">More </a></li> 
     <li><a href="#subtabs-3">iFinal</a></li> 
    </ul> 
    <div id="subtabs-1"> 
      First Tab 
    </div> 
    <div id="subtabs-2"> 
      Second Tab 
    </div> 
    <div id="subtabs-3"> 
      Final Tab 
    </div> 
</div>

來源

2013-10-31 18:08:01 shuji

更具體地說，它需要放在'.load（）'回調函數中。 – Barmar

不能在同一個dom中有兩個同名的ID –

@VictoriaFrench你可以，他們只應該在不同的父母，所以選擇可以更具體。 – shuji

您需要在啓動後點擊新內容的選項卡。使用負載的完整回調來執行此操作。還應該將clcik處理程序委託給始終存在的元素。當你移除一個元素或者替換它時，綁定到它的任何事件處理程序都會丟失。

$(document).on('click','#tabs-1',function() { 
     $('.boo').load('boo.html', function(){ 
      /* new content exists now, can run code on it*/ 
      $("#tabs").tabs(); 
     }); 
});

來源

2013-10-31 18:12:23 charlietfl

第一個問題是，您使用一個id來命名兩個選項卡。考慮將它們改爲類。然後在該類這樣每個DOM更改呼叫.tabs（）後：

boo.html

<div class="tabs"> 
    <ul> 
    <li><a href="#booTab1">Tabb</a></li> 
    <li><a href="#booTab2">More</a></li> 
    <li><a href="#booTab3">iFinal</a></li> 
    </ul> 
    <div id="booTab1">First Tab</div> 
    <div id="booTab2">Second Tab</div> 
    <div id="booTab3">Third Tab</div> 
</div>

父代碼：

<div class="tabs" id="tabContainer"> 
    <ul> 
    <li><a href="#tabContainerTab1">Nunc tincidunt</a></li> 
    <li><a href="#tabContainerTab2">Proin dolor</a></li> 
    <li><a href="#tabContainerTab3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabContainerTab1"> 
    <p>Hello World!</p> 
    <div class="boo"></div> 
    </div> 
    <div id="tabContainerTab2"></div> 
    <div id="tabContainerTab3"><p>Some Test</p></div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $(".tabs").tabs(); 
     $('#tabContainerTab1').click(function() { 
     $('.boo').load('boo.html', function() { 
      $('.tabs').tabs(); 
     }); 
     }); 
    }); 
</script>

來源

2013-10-31 18:50:20

如果添加div，jQuery UI不適用

回答

相關問題