jQuery anfügen, wenn ich Rekord Ansicht löschen hat

Question

Glatzkopf geändert Liste ich einige Werte append

<div data-role="main" class="ui-content"> 

     <h2 id="list-filter">Lista produktów z lodówki</h2> 
     <div data-demo-html="true"> 
      <ul data-role="listview" id="produktList" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true"> 

      </ul> 

      <div id="deleteButton"><input type="button" id="merge_button" value="Usuń"></div> 
     </div><!--/demo-html --> 

    </div> 

Und JS

function iterateOverLocalStorage() { 
      $('ul#produktList').html(""); 
      for(var i=0; i < localStorage.length; i++) 
      { 
       console.log(localStorage.getItem(localStorage.key(i))); 
       $('ul#produktList').append("<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>"+localStorage.getItem(localStorage.key(i))+"" + 
         "<span><input type='checkbox' id='check' name='produkty[]' value='"+i+"'></span></li>"); 
      } 



     } 
     iterateOverLocalStorage(); 

Es sieht ok

Bei der Verwendung von I Klicken Sie auf Usuń Schaltfläche und dies tun Ion wurde gelöscht ausgewählter Datensatz

Die Ansicht ändert sich, warum?

Answer 1

Die zwei Ansichten sind verschieden, weil die Radioknöpfe in der ersten Ansicht auf Dokument Last erzeugt wurden, während die Radioknöpfe in der zweiten Ansicht zu einem späteren Zeitpunkt erzeugt wurden.

jQuery Mobile erweitert das Dokument beim Laden der Seite, direkt nachdem Sie die ersten Optionsfelder eingefügt haben. Diese Verbesserung erfolgt jedoch nicht automatisch, wenn Sie HTML zu einem späteren Zeitpunkt einfügen. Stattdessen müssen Sie jQuery Mobile anweisen, die Erweiterung anzuwenden, z. B. mit der enhanceWithin method.

Um das zu erreichen, ändern Sie dies:

$('ul#produktList').append(
    "<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>" 
    +localStorage.getItem(localStorage.key(i))+"" + 
    "<span><input type='checkbox' id='check' name='produkty[]' value='" 
    +i+"'></span></li>"); 

zu:

$("<li class='ui-li-static ui-body-inherit ui-first-child ui-last-child'>" 
    +localStorage.getItem(localStorage.key(i)) + 
    "<span><input type='checkbox' id='check' name='produkty[]' value='" 
    +i+"'></span></li>").appendTo('ul#produktList').enhanceWithin(); 

auch, wenn auch nicht wirklich notwendig, ich die ersten Radio-Buttons in den gleichen Bedingungen hinzufügen würde Ihnen raten, wie in das Klick-Szenario, fügt sie nach der anfänglichen Verbesserungsphase hinzu. Auf diese Weise werden sie in konsistenter Weise hinzugefügt und verlassen sich auf die Erweiterung, die in beiden Fällen mit dem obigen Code ausgelöst wird.

Dies können Sie wie folgt tun. Ersetzen Sie diese Zeile (derjenige, der außerhalb jeder Funktion auftritt):

iterateOverLocalStorage(); 

mit diesem:

$(document).on("pagecreate",function(){ 
    iterateOverLocalStorage(); 
}); 

---

Beachten Sie, dass es mehrere Ereignisse, die ausgelöst werden, wenn jQuery Mobile-Seiten laden oder Übergang. Markieren Sie dieses Bild aus: