jquery mobile listview css on pageshow答案

【问题标题】：Jquery mobile listview css on pageshowjquery mobile listview css on pageshow
【发布时间】：2015-09-27 16:43:39
【问题描述】：

我尝试加载一个 json 文件并将内容放入 右侧带有翻转开关的列表视图。

我的 HTML 文件带有一个示例列表视图行，工作正常（这里没有第一页和导航栏保持清晰）

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="liststyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="pagetwo">
  <div data-role="main" class="ui-content" id="main">   
    <ul data-role="listview" data-inset="true" id="alarmlist">
      <li data-role="fieldcontain">
        <a href="#pageone">Control</a>
        <select id="test-slider" data-role="slider" name="testslider">
          <option value="off">off</option>
          <option value="on">on</option>
        </select>
      </li>
    </ul>
  </div>
</div>
</body>

和链表style.css

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    display: block !important;
    padding: 0,9em 75px 0,9em 15px !important;
}
div.ui-slider-switch {
    position: absolute;
    right: 0;
    width: 40%;
    top: 12.5%;
}

以及script.js文件中的代码

$("#pagetwo").on("pageshow" , function() {

            var output = '';
            for (var x in data.alarm) {
                output += '<li data-role="fieldcontain">' +
                    '<a href="#">' + data["alarm"][x]["time"] + 
                '<select data-role="slider">' + 
                '<option value="off">off</option>' +
                '<option value="on">on</option></select>' +
                '</a> </li>';

            }
            $('#alarmlist').append(output).listview("refresh");
});

现在我得到了这个结果： http://imageshack.com/a/img540/3844/dxuopI.png

当我删除 .on("pageshow" , function() { 并从头开始运行两个页面时，我得到了更好的结果，但也是一个错误。 http://imageshack.com/a/img538/9508/89jtvd.png

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您只需要告诉 jQM 增强翻转开关以及刷新列表 ($('#alarmlist').append(output).listview("refresh").enhanceWithin();)：

$(document).on("pageshow", "#pagetwo", function () {
    var output = '';
    for (var x in data.alarm) {
        output += '<li data-role="fieldcontain">' +
            '<a href="#">' + data["alarm"][x]["time"] +
            '</a> <select data-role="slider">' +
            '<option value="off">off</option>' +
            '<option value="on">on</option></select>' +
            '</li>';

    }
    $('#alarmlist').append(output).listview("refresh").enhanceWithin();
});

DEMO

【讨论】：