Динамическое добавление разборных элементов

Question

Источник: http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html Когда я добавляю такой элемент вручную в свой код, он отображается правильно.Но когда я пытаюсь добавить его с помощью jQuery, вот так:

$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>');

Он просто отображает заголовок в h3 и содержимое под ним, а не как разборный элемент.Как я могу это исправить?

Answer 1

Самый простой способ добиться этого - вызвать метод collapsible () для динамически создаваемых элементов div:

$('div[data-role=collapsible]').collapsible();

source: http://forum.jquery.com/topic/dynamically-add-collapsible-div

Answer 2

Я думаю,

после установки innerhtml, просто пометив событие на нем, вы получите динамический контнет, как показано ниже

$('#<divId or elementId').trigger("create");

Answer 3

это то, что я делаю.Надеюсь, что это поможет

HTML

<div id="collapsibleSet" data-role="collapsible-set">
   <div id="ranking1"></div>
</div>

Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>');
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});

htmlRankings () - это функция js, которая возвращает html, который я хочу внутри разборного div.это может быть что-то вроде этого

<h3>11</h3>
<span>test</span>

Answer 4

Этот код для Perl, вы можете изменить его для любого языка программирования.

 <a href="javascript:collapsible('$div_instance','$imageID')">
         <IMG id='$imageID' SRC='$imagePath' alt='(Expand / Collaspe Section' title='Expand / Collaspe' width=10 height=10>
          $display_header <br/></a>
          <div id=$div_instance name=$div_instance 
           style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;">
                                       <-- your content -->
            </div>
<script language="JavaScript" type="text/javascript">
    <!--
     function collapsible(theID,imageID) {
          var elemnt = document.getElementById(theID);
          var imageObject =document.getElementById(imageID);
          if(elemnt.style.display == 'block') {
               elemnt.style.display ='none';
               imageObject.src='images/expand_icon.gif';
           }
           else{
           elemnt.style.display ='block';
           imageObject.src='images/expand_icon_down.gif';
           }

    }
    // -->
    </script>

REF: http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html

Answer 5

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

$('#element').collapsibleset('refresh');

Надеюсь, это поможет

Answer 6

Начиная с jquery mobile beta2, вы запускаете событие - .trigger ('create')

Answer 7

См. Функцию enhanceWithin(): Документы jQuery Mobile: EnhifyWithin

Вызовите enhanceWithin для объекта jQuery, представляющего родителя вашего элемента DOM, для добавления любых функций jQuery Mobile в ваш HTML.

В этом случае:

jQuery('[data-role="collapsible"]').parent().enhanceWithin();

Обратите внимание , что если вы добавляете несколько виджетов jQuery Mobile, вы можете вызывать enhanceWithin только для такого предка, как«BODY» после добавления всего вашего динамического HTML.

Это было бы также неплохим решением для этого вопроса: Обновление раздела после динамического добавления HTML в jquery mobile

Answer 8

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

   var inputList = '';
    var count = 0;
    var divnum = 999;
    var collit = 'false';
    inputList += '<div data-role="content">';
    inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">';
    $.each(fbFullStrArray, function(index, item) { 
    //set questions and answers for each appt
    getsetApptFback(fbStrApptArray[index]);
    //write the html to append when done
    inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">';
    inputList += '<h3>'+fbFullStrArray[index]+'</h3>';
    inputList += '<div id="g'+divnum+'" class="ui-grid-a">';
    inputList += '<div id="gb'+divnum+'" class="ui-block-a">';
    inputList += '<div id="fbq'+index+'"><ol>';
    $.each(fbQidArray, function(ind,it) {
        inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>';
    });
    inputList += '</ol></div></div>'
    inputList += '<div id="ga'+divnum+'" class="ui-block-b">';
    inputList += '<div id="fba'+index+'"><ul>';
    $.each(fbQidArray, function(ind,it){
            inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>';
    });
    inputList += '</ul></div></div></div></div>';
    collit = "true";
    divnum++;
    count++;
    });
    inputList += '</div></div>';

    $('#fb_showings_collapse [role=collapsible-set]').text('');
    $('#fb_showings_collapse [role=collapsible]').text('');
    if (count > 0) {
    $('#fb_showings_collapse [role=collapsible]').remove();
    $('#fb_showings_collapse').append(inputList).collapsibleset('refresh');
    }
    else if (count == 0){
    inputList = 'Sorry! No Showings To Show Feedback For!';
    $('#fb_showings_collapse [role=collapsible-set').remove();
    $('#fb_showings_collapse [role=collapsible]').text(inputList);
    }

Answer 9

Таким образом, вы можете динамически добавлять маленькие складные в большую.HTML:

<div data-role="collapsible" data-mini="false" data-theme="b"  >
    <h3>main header text</h3>
    <div id="aCollaps"></div>
</div>

Javascript

//Your could do for(){
    $("#aCollaps").append('<div data-role="collapsible" data-inset="false" data-content-theme="b">' + 
    '<h3>'+HeaderText+'</h3>'+ContentText+'<br/></div>');
//}
//You might want to be more specific here if you have more collapsibles in the page. this just updates all collapsibles
$('div[data-role=collapsible]').collapsible({refresh:true});

Answer 10

Лучше, чем сворачиваемое, это updatelayout, оно в документах .Короче говоря ...

Это событие вызывается компонентами в рамках, которые динамически отображают / скрывают содержимое, и предназначен в качестве общего механизма для уведомления других компонентов.что им может потребоваться обновить свой размер или положение .Внутри фреймворка это событие вызывается для элемента компонента, содержимое которого было показано / скрыто, и всплывает вплоть до элемента документа .

$('div[data-role=collapsible]')
    .trigger( 'updatelayout' );
    //.collapsible();