如何動態添加jquery手風琴到頁面？

我有一個div <div id="detailTable" width="100%">中，我添加各種小工具，有時其他內容，所以爲了使jsp頁面不看繁瑣，我刪除任何現有的元素中detailTable和一些點擊添加內容。現在我想添加一個jQuery手風琴，但它似乎不起作用。請在此提供解決方案。由於如何動態添加jquery手風琴到頁面？

下面是我在做什麼，除去和detailTable按鈕添加手風琴點擊

$('#detailTable').empty(); 
$('<div>') 
.attr('id','healthCheckSpan') 
.html('<div class="titleBlue">Health Check Summary</div>'+ 
     '<table style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">'+ 
      '<thead>'+ 
       '<tr style="color :#FFFFFF;background-color: #8EA4BB">'+ 
        '<th width="10%" align="center"><b>Recommendations</b></th>'+ 
       '</tr>'+ 
      '</thead>'+ 
      '<tbody >'+ 
       '<tr style="color :#2F5882;background-color: #EDF1F5">'+ 
        '<td align="left" width="10%">'+ 
         '<span id="recommendations">'+ 

'<div id="hcAccordion">'+ 
'<h3><a href="#">Error</a></h3>'+ 
'<div><p id="errorhc">ERROR'+ 
'</p></div>'+ 

'<h3><a href="#">Warning</a></h3>'+ 
'<div><p id="warninghc">WARNING'+ 
'</p></div>'+ 

'<h3><a href="#">Info</a></h3>'+ 
'<div><p id="infohc">INFO'+ 
'</p></div>'+ 
'</div>'+ 

'<script>$(document).ready(function(){'+ 
'$(function() {  $("#hcAccordion").accordion(); });'+ 
'});</script>'+  
         '</span>'+ 
        '</td>'+ 
       '</tr>'+ 
      '</tbody>'+ 
     '</table>'+ 
    '</div>')  
.appendTo('#detailTable');

我的截圖，在這裏，我只是得到一個應該是在所有的手風琴，但沒有效果。

enter image description here

來源

2011-06-27 abi1964

首先你應該刪除醜html('....blabla....');這是可怕的......

把在你正常的HTML，並隱藏，然後使用clone()複製，

的jQuery

var html_data = $('#hidden_wrapper').clone().html(); 
    $('#detailTable').empty(); 
    $('<div>') 
    .attr('id','healthCheckSpan') 
    .html(html_data)  
    .appendTo('#detailTable').delay(1).queue(function(){ 
     $("#hcAccordion").accordion(); 
     // now do not use ID as this would change if there are multiple ones... use classes .hcAccordion unless it is once. 
    });

HTML

<div id="hidden_wrapper">... accordion goes here...</div>

來源

2011-06-27 11:55:54 Val

@val，你如何處理ID的內部HTML被克隆？像「#hcAccordion」？另外，如果你使用課程，當動畫停止時，手風琴將動畫並在屏幕上顯示。較好地保持html_data作爲函數 – hungryMind

外字符串多數民衆贊成什麼意見解釋說，ID是不好的，他/她應該使用類，HTML（html_data）將攜結構手風琴... – Val

@val：hcAccordion將只有一次，你是否注意到'$（'＃detailTable'）。空（）;'因爲我使用它來刪除所有內容，所以我不能在我的html中添加'hidden_wrapper' ..我是否正確？ – abi1964

我想你應該創建你的手風琴，然後只是追加或者您需要刪除的div。因此，採取 '$（文件）。就緒（函數（）{' + '$（函數（）{$（「#hcAccordion」）.accordion（）;}）;' + '}）;' 不在您的動態HTML中，並且會在頁面加載時運行。

來源

2011-06-27 11:54:36

這'detailTable'是包含不同類型的內容，所以其並不總是一個手風琴，這意味着我不能創建手風琴1噸然後追加其他內部容器它..請在這方面提出一些建議。感謝您的回答 – abi1964

下面的代碼已經添加，但js沒有被執行，因爲它應該加載準備好，這是我猜測已經提出。

擺脫這個代碼

'<script>$(document).ready(function(){'+ 
'$(function() {  $("#hcAccordion").accordion(); });'+ 
'});</script>'+

和烏拉圭回合後追加代碼中調用$("#hcAccordion").accordion();

來源

2011-06-27 11:55:09 hungryMind

我認爲是這樣，但我在Firefox錯誤控制檯中出現此錯誤。錯誤：$（「＃hcAccordion」）手風琴是不是一個函數源文件：http：// in164263：10070/CSM/showResult.action 線：0 – abi1964

延遲由VAL建議的代碼。確保手風琴js已加載。您也可以動態加載JS。 http://api.jquery.com/jQuery.getScript/ – hungryMind

我沒有爲u問'.appendTo（ '＃detailTable'）。延遲（1）.queue（函數（）{$ （「#hcAccordion」）。手風琴（）; }）;'，仍然沒有運氣，而不是IE8給我這個錯誤'對象dosen't支持這個屬性或方法' – abi1964

如何動態添加jquery手風琴到頁面？

回答

相關問題