Question

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

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

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

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

进一步注意：在注入trigger("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>

jquery mobile trigger create增强了一些元素，但并非全部

0 个答案: