-2

嗨，我创建了一个创建动态字段的 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%"

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

谢谢

4

2 回答 2

2

这是因为：

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

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

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

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

添加内容后。

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

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

不会做任何事情，主要是因为您在添加新内容之前调用它，第二件事是因为#claimPagefield您必须使用页面 idpagecreate而不是create. Create仅适用于内容 div。

于 2013-07-16T08:23:54.907 回答
0

我终于找到了解决方案。

下面的这段代码起到了作用，因为您需要先 refrsh 然后在一行中调用 teh create trigger all

$('#claimProfileListView').listview('refresh').trigger("create");
于 2013-07-17T10:28:09.447 回答