jQuerymobile列表视图中动态添加的复选框无法正确呈现

Question

jQuerymobile列表视图中的动态添加复选框无法正确呈现。

在下面找到无序列表。我在HTML中添加了一个示例listitem。

<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>

以下是上述代码的输出。哪个渲染正确。

现在我正在尝试使用jQuery动态添加列表项。

$.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');

下面的

是上述代码的输出。显示不正确。

为什么动态添加的listitem无法正确呈现？

Answer 1

添加

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

前

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

或者，致电.trigger("create");

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

  

<强> Demo

Answer 2

您需要在追加功能中调用listview刷新并添加.trigger（“create”）;.

$('#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");

检查这个小提琴：http://jsfiddle.net/eRsMV/5

Answer 3

你有额外的

});

只需使用

$('#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');

我的建议是使用像Dreamweaver这样的编辑器来节省你的时间。

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