Как динамически добавить аккордеон JQuery на страницу? - PullRequest
Новая
       1

Как динамически добавить аккордеон JQuery на страницу?

0 голосов
/ 27 июня 2011

У меня есть 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

Ответы [ 3 ]

1 голос
/ 27 июня 2011

сначала вы должны удалить это уродливое 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>
0 голосов
/ 27 июня 2011

Следующий код уже добавлен, но js не выполняется, поскольку он должен загружаться при готовности, что, я думаю, уже поднято.

Избавьтесь от этого кода 

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

и позвоните $( "#hcAccordion" ).accordion(); после добавления кода

0 голосов
/ 27 июня 2011

Я думаю, что вы должны создать свой аккордеон, а затем просто добавлять или удалять div, как вам нужно. Так возьми '$ (Документ) .ready (функция () {' + '$ (function () {$ ("#hcAccordion") .accordion ();});' + '});' из вашего динамического HTML и запустить его при загрузке страницы.

...