Как динамически создать JPanel в jquery?

#javascript #jquery

Вопрос:

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

введите описание изображения здесь

Мой контейнер

 <div id="detailTable" style="width:100%;">

</div>

<!--Creating panels (Same thing if i create manually it is created, see the image)-->
<div title="General Properties" class="class">
            ad
</div>
<div title="Other Properties" class="class">
    ad1
</div>

Jquery

 $('.class').jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });


//when the user clicks on `Server` (left hand side) the below code is triggered
$('#detailTable').empty();
    $('<div>')
    .html('<div class="titleBlue">Configurationamp;>' productname 'amp;>Server</div>' 
            '<div title="General Properties" class="class">'   //Creating panels dynamically
                '<table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1">' 
                    '<tbody>' 
                        '<tr>' 
                            '<th style="width:22%" align="left">Version</th>' 
                            '<td style="align="left">' infa9_pm_version '</td>' 
                        '</tr>' 
                    '</tbody>' 
                '</table>' 
            '</div>' 
            '<div title="Other Properties" class="class">' 
                '<table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1">' 
                    '<tbody>' 
                        '<tr>' 
                            '<th style="width:22%" align="left">Home</th>' 
                            '<td style="align="left">test</td>' 
                        '</tr>' 
                    '</tbody>' 
                '</table>' 
            '</div>')       
    .appendTo('#detailTable');

Обновить:

Мне это тоже помогло

 $('#detailTable').empty();
    $('<div>')
    .html('')       
    .appendTo('#detailTable').delay(10).queue(function(){
        $('.class').jPanel({
            'effect'    : 'fade',
            'speed'     : 'slow',
            'easing'    : 'swing'
        });
   });

Ответ №1:

Поскольку вы добавляете содержимое динамически, вам следует использовать jQuery live.

Прототип для привязки jpanel к классу по щелчку —

 $('.class').live('click', function(){
    $(this).jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });.focus();
    $(this).removeClass('class');
});

Для запуска программно используйте триггер jQuery.

 $('.class').trigger('click');

1. Привет, спасибо за ваш ответ, но панель появляется только тогда, когда я нажимаю на div, как это возможно, чтобы она появлялась сразу после ее создания?

2. вы можете вызвать щелчок программно. Обновленный ответ.

3. Спасибо, .delay(10).queue мне тоже помогло .. смотрите мой обновленный вопрос

Ответ №2:

Вы можете сделать следующее, чтобы панели инициировались после динамического содержимого, пока динамическое содержимое не сгенерировано ajax или обратным вызовом (в таких случаях инициируйте метод JPanel при успешном завершении ajax или методе обратного вызова). здесь селектор — это класс или идентификатор, который вы используете для панели, я не предпочту использовать delay и queue, поскольку их назначение совершенно разное

 $('#detailTable').empty();
$('<div>')
.html('')       
.appendTo('#detailTable').find('selector').jPanel({
        'effect'    : 'fade',
        'speed'     : 'slow',
        'easing'    : 'swing'
    });

Я попытаюсь реализовать обработчик по умолчанию для этих сценариев в следующем выпуске JPanel.