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

Question

我有一个 div

，其中我附加不同的小部件，有时附加其他内容，所以为了让 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');

，这里我只是得到了一个应该是手风琴的东西，但根本没有任何效果。

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。所以采取
'$(文档).ready(函数(){'+
'$(function() { $( "#hcAccordion" ).accordion(); });'+
'});'
从动态 HTML 中取出并让它在页面加载时运行。

Answer 3

已添加以下代码，但 js 未执行，因为它应该在就绪时加载，我猜这已经引发了。

删除此代码

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

并在附加代码后调用 $( "#hcAccordion" ).accordion();