Question

我正在尝试在单击按钮时向列表视图添加滑块，但滑块丢失了CSS！我尝试刷新listview，但它没有用。我做错了什么？

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="app.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Insert Page Title Here</h1>
  </div>

  <div data-role="content">
    <button id="btn-insert">Insert</button>
    <ul id="events-list" data-role="listview" data-autodividers="false" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a">
    </ul>
  </div>

  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 

</body>
</html>

JS

$(document).on("pageinit", "#pageone", function (event) {

    $("#btn-insert").click(function(e) {
        var output = "<select name=\"bluetooth-flip-connect\" id=\"bluetooth-flip-connect\" data-role=\"slider\" data-theme=\"b\" data-track-theme=\"b\" data-address=\"123\" >";
        output += "<option value=\"off\">off</option>";
        output += "<option value=\"on\" >on</option>";
        output += "</select>";

        $("#events-list").append("<li>Teste" + output + "</li>");

        $("#events-list").listview("refresh");
        $("select").slider("refresh");

    });
});

如何使用jquerymobile将滑块添加到listview

0 个答案: