javascript - jquery mobile动态添加元素无法正常工作

Question

我想动态添加 li 标签。
事件虽然添加

listview("refresh");

它似乎不适用jquery mobile css。 我试过了

listview().listview("refresh");

下面的代码是我写的。 请将下面的代码保存为 tmp.html 并在您的本地主机上尝试。

在我的环境中，推送 ADD btn 时没有错误。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(document).bind('mobileinit', function() {
    $.mobile.changePage.defaults.changeHash = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
  });
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
  function onAddBtn() {
    $li = $('<li><p>a:</p><input type="text"><p>b:</p><input type="text"></li>');
    $("#SentenceList").append($li).listview("refresh");
  }

  function onReady() {
    $("#AddBtn").click(onAddBtn);
  }

  $(onReady);
</script>
<div data-role="page" id="AddPage">
  <header data-role="header" data-position="fixed" data-theme="b">
    <a data-role="button" data-rel="back" data-icon="back" style="background-color: gray;">Back</a>
    <h1>Add Memo</h1>
  </header>
  <section data-role="content">
    <ul id="SentenceList" data-role="listview">
      <li>
        <p>a:</p>
        <input type="text">
        <p>b:</p>
        <input type="text">
      </li>
      <li>
        <p>a:</p>
        <input type="text">
        <p>b:</p>
        <input type="text">
      </li>
    </ul>
  </section>
  <a data-role="button" data-icon="plus" id="AddBtn">ADD</a>
</div>

Answer 1

您可以告诉 jQM 在刷新 ListView 后增强输入:

$("#SentenceList").append($li).listview("refresh").enhanceWithin();

DEMO