Question

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

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

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

和链接的liststyle.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

Answer 1

你只需要告诉jQM增强flipswitch以及刷新列表（$('#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

在pageshow上的Jquery移动列表视图css

1 个答案: