1

我认为这可能是 Jquery Mobile 中的错误，但也可能是用户错误（我的）。

对于 jquery 移动页面，我$(..).trigger("create")在异步加载一些 html 后手动调用。我发现一个奇怪的 - 无论如何对我来说 - 行为，即 <input>加载的 html 上的文本类型没有增强为具有 JQM 的样式，而<input>s按钮类型是。

这是一个复制问题的精简版本。基本上，页面加载和注入foo.html. 的一部分foo.html是占位符 div，随后加载和注入其中bar.html. bar.html包含打开弹出窗口的链接。单击它并打开弹出窗口时，按钮的样式正确；输入不是。

注意：我调用trigger("create")注入内容的父级。

进一步说明：调用where is injectiontrigger("create")的祖父母bar.html可以正确设置所有样式，包括弹出窗口中的输入。请参阅下面的代码。

在我的基本 html 页面的正文中：

<div data-role="page" id="grandparent" data-theme="a">
<h3>A very basic page</h3>
</div>

该页面头部的脚本：

<script type="text/javascript">    
  $(document).ready(function() {      
    var path = "pathToFiles/";
    $("#grandparent").load(path + "foo.html", null, function() {
      $("#grandparent").trigger("create");

      //now load bar
      $("#bar_placeholder").load(path + "bar.html", null, function() {

        /*this does NOT enhance text <input> on popup*/
        $("#bar_placeholder").trigger("create");

        /*this DOES enhance text <input> on popup*/
        //$("#grandparent").trigger("create");

      });            
    });    
  });  
</script>

这是 foo.html

<div data-role="content" id="foo">
  <h3>Foo before placeholder...</h3>

  <div id="bar_placeholder" data-role="content"></div>

  <h3>...foo after placeholder</h3>

  <label for="foo_input" class="ui-hidden-accessible">foo input IS enhanced:</label>
  <input id="foo_input" value="" placeholder="i AM enhanced" data-theme="a" type="text" />


  <input type="button" id="foo_button" value="Foo Button"/>

</div>

这是bar.html：

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">bar popup button</a>

<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <h3>Bar header</h3>              

    <label for="bar_input" class="ui-hidden-accessible">bar text input NOT enhanced</label>
    <input name="bar_input" id="bar_input" placeholder="i am NOT enhanced" data-theme="a" type="text"/>

    <input type="button" data-theme="a" value="bar button"/>    

</div>
4

0 回答 0