Das dynamisch hinzugefügte Kontrollkästchen in der jQuerymobile-Listenansicht wird nicht ordnungsgemäß gerendert.

Finden Sie unter der ungeordneten Liste. Ich habe ein Beispiellistenelement im HTML selbst hinzugefügt.

<ul data-role="listview" id="ul_address_list" >
  <li data-icon="false"><a href="#" class="add-container">
    <label class="add-container" data-corners="false">
      <input type="checkbox" value="true" />
      <label class="lbl_add-container">
        <h3>Header</h3>
        <p>Content</p>
      </label>
    </label>
  </li>
</ul>

Unten ist die Ausgabe für den obigen Code. Welches ist richtig zu rendern.

The correct display

Jetzt versuche ich, das Listenelement mithilfe der Append-Funktion mithilfe von jQuery dynamisch hinzuzufügen.

$.each(obj_address_list, function (ctr, obj) {
    $('#ul_address_list').append('<li data-icon="false">' +
        '<a href="#" class="add-container">' +
        '<label class="add-container" data-corners="false">' +
        '<input type="checkbox" value="true" />' +
        '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
        '</label>' +
        '</label>' +
        '</a>' +
        '</li>');
});
$('#ul_address_list').listview('refresh');

Unten ist die Ausgabe für den obigen Code. Wird nicht richtig angezeigt.

Not displayed correctly

Warum wird das dynamisch hinzugefügte Listenelement nicht richtig gerendert?

1
Malaiselvan 1 Dez. 2013 im 03:50

3 Antworten

Beste Antwort

Einfach hinzufügen

$("[type=checkbox]").checkboxradio();

Vor

$('#ul_address_list').listview('refresh');

Oder rufen Sie .trigger("create"); an

$('#ul_address_list').listview('refresh').trigger("create");

Demo

2
Omar 1 Dez. 2013 im 00:02

Sie müssen die Listenansicht-Aktualisierung in Ihrer Append-Funktion aufrufen und .trigger ("create") hinzufügen.

$('#ul_address_list').append('<li data-icon="false">' +
  '<a href="#" class="add-container">' +
    '<label class="add-container" data-corners="false">' +
      '<input type="checkbox" value="true" />' +
      '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
      '</label>' +
    '</label>' +
  '</a>' +
'</li>').listview("refresh");

Überprüfen Sie diese Geige: http://jsfiddle.net/eRsMV/5

2
Alessandro Incarnati 1 Dez. 2013 im 00:19

Du hast extra

});

Benutz einfach

$('#ul_address_list').append('<li data-icon="false">' +
  '<a href="#" class="add-container">' +
    '<label class="add-container" data-corners="false">' +
      '<input type="checkbox" value="true" />' +
      '<label class="lbl_add-container">' +
        '<h3>Header</h3>' +
        '<p>content</p></div>' +
      '</label>' +
    '</label>' +
  '</a>' +
'</li>');

$('#ul_address_list').listview('refresh');

Mein Rat ist, einen Editor wie Dreamweaver zu verwenden, um Zeit zu sparen.

http://jsfiddle.net/prollygeek/xqwqM/1/

0
ProllyGeek 1 Dez. 2013 im 00:18