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

【问题标题】：Jquery mobile dynamic fields not applying styles?Jquery移动动态字段不应用样式？
【发布时间】：2013-07-16 08:09:14
【问题描述】：

您好，我创建了一个创建动态字段的 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');

如果我手动将这段代码的 sn-p 添加到上述输入字段中

style="width:100%"

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

谢谢

【问题讨论】：

标签： javascript jquery-mobile

【解决方案1】：

这是因为：

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

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

如果你使用这条线，基本上你会让它工作：

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

添加内容后。

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

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

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

【讨论】：

您好，感谢您的提示。我在调用 loadFields(); 后尝试了 Create；并且它没有在输入字段上应用主题。然后我尝试了替换创建触发器和相同问题的 pageCreate，输入字段或单选按钮没有应用主题。然而，文本确实应用了一个主题，即
Reasons:
标签
工作示例：jsfiddle.net/Phhh7，告诉我您是否使用循环添加新的动态内容？
没有。我使用一堆 If 语句来添加内容。这越来越奇怪了。我基本上将我的整个 JS 代码复制到您提供的示例中，只是更改了 pageCreate 触发器上的 pageID 名称，它适用于您的示例。但是，当我恢复到适当的 pageID 并从浏览器尝试它时，它会失败并且不应用主题。我还看到，尽管您的代码有效，但它没有在列表项中添加分隔符，并且它显示为一个完整的列表项用户界面
如果你想把你的项目寄给我，我会修复它。这可能很容易，但我需要一个更好的视角。
我们可以发起私聊。我不知道怎么做？

【解决方案2】：

我终于找到了解决办法。

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

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

【讨论】：