如何动态添加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手风琴到页面？

回答

相关问题