Question

您好我创建了一个创建动态字段的html页面，当我将它们添加到列表视图时，它不会应用jquery移动主题。

这是我的javascript：

//Dynamically load data fields for items
$(document).on('pagebeforeshow', '#claimPagefields', function(){ 
    //trigger a create event
    $('#claimPagefield').trigger('create');
    loadFields();
});

这是我的HTML页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemFields.js"></script>

  <link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" /> 
  <script src="src/jquery.ui.datepicker.js"></script>
  <script src="src/jquery.ui.datepicker.mobile.js"></script>


</head>

<body>
<div data-role="page" id="claimPagefields">
  <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
    <h1>New Claim</h1>
  </div>
  <div data-role="content">
    <ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true"  data-scroll="true">
      <li data-role="list-divider">
        <h2 id="itemTitle">Title</h2>
      </li>


    </ul>
    <div data-role="navbar">
      <ul>
        <li><a href="some.html" data-theme="b">Save</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

它不会在输入字段本身应用主题，当我添加它时通常看起来像这样

 listItem = '<li id="reasons">' +
        '<h3>Reasons:</h3>' +
        '<div data-role="fieldcontain">' +
          '<input type="text" name="reasons" id="textFieldReasons" value="" />' +
        '</div>' +
      '</li>';

         $('#claimTypelistfields').append(listItem);

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

如果我手动将此代码段手动添加到上述输入字段

style="width:100%"

它只能工作并调整宽度，但我试图看看是否有办法将其应用一次，而不是必须手动为每个字段应用主题！

由于

Answer 1

这是因为：

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

将仅增强listview小部件并仅增强它。添加到列表视图的每个非列表视图窗口小部件都不会得到增强。

如果您使用此行，基本上您将使其工作：

$('#claimPagefield').trigger('pagecreate');

添加内容后。

还有一件事，在你当前的代码中，这一行：

$('#claimPagefield').trigger('create');

不会执行任何操作，主要是因为您在添加新内容之前调用它，其次是因为 #claimPagefield 是页面ID，您必须使用 {{1} } 而不是 pagecreate 。 create 仅适用于内容div。

Answer 2

我终于找到了解决方案。

下面的代码完成了这个技巧，因为你需要首先refrsh然后在一行中调用teh create trigger

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

Jquery移动动态字段不应用样式？

2 个答案: