Question

我有一个div <div id="detailTable" width="100%">，其中我有时会附加不同的小部件其他内容，所以为了让jsp页面看起来不麻烦，我要删除detailTable中的所有现有元素并添加内容点击一下。现在我想添加一个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

Answer 1

首先你应该删除丑陋的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>

Answer 2

我认为您应该创建您的手风琴然后根据需要添加或删除div。所以拿 '$（文件）。就绪（函数（）{' + '$（function（）{$（“＃hcAccordion”）。accordion（）;}）;'+ '}）;' 超出动态HTML并让它在页面加载时运行。

Answer 3

以下代码已经添加，但js没有被执行，因为它应该加载就绪，这是我猜已经提出。

摆脱这段代码

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

并在您追加代码

后致电$( "#hcAccordion" ).accordion();

如何动态地向页面添加jquery手风琴？

3 个答案: