jQuerymobile 列表视图中动态添加的复选框未正确呈现答案

【问题标题】：Dynamically added checkbox inside jQuerymobile list view is not rendering properlyjQuerymobile 列表视图中动态添加的复选框未正确呈现
【发布时间】：2013-11-30 23:50:26
【问题描述】：

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

在无序列表下方查找。我在 HTML 本身中添加了一个示例列表项。

<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 的 append 函数动态添加列表项。

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

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

为什么动态添加的列表项没有正确呈现？

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

只需添加

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

之前

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

或者，拨打.trigger("create");

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

Demo

【讨论】：

您的两个建议都运行良好。非常感谢。我把这样的代码放在$("input[name=chk_address]").checkboxradio(); 上，这也很好用。

【解决方案2】：

您需要在 append 函数中调用 listview refresh 并添加 .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

【讨论】：

如果您看到我的示例，它表明添加您在答案中添加的相同内容，它附加了应用了相同 css 属性的新列表元素。
只是我忘了在我的答案中添加它。它是 .trigger("create");那是丢失的。 jsfiddle.net/eRsMV/5

【解决方案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/

【讨论】：

@prollyGeed - 抱歉，这是复制粘贴错误。我更新了问题。
$('#ul_address_list').listview('refresh').trigger("create");这是奥马尔给出的正确答案
obj_address_list 是一个对象列表，它将保持 for each 循环运行 n 次。我没有复制整个代码。添加$("[type=checkbox]").checkboxradio(); 后，它工作正常。 Tks
好的，顺便说一下你的代码工作正常，检查jsfiddle.net/prollygeek/xqwqM/1，就像你说它需要再次触发复选框一样。