jQuery Mobile选择菜单在文档加载时重复

Question

我有这个简单的选择菜单，我正在项目中尝试

<select data-mini="true">
  <option value="small">One</option>
  <option value="medium">Two</option>
  <option value="large">Three</option>
</select>

这很好。但是我在文档加载时加载了页眉和页脚（如下所示）。这似乎是在创建两个嵌套的选择菜单，有时此嵌套菜单往往会上升到3或4级。

        $(document).ready(function () {
            $('#header').load("iphoneHeader.html");
            $('#footer').load("iPadFooter.html");
        });

为什么会出现此错误？有什么解决方法吗？

谢谢！

Answer 1

切勿使用jQuery Mobile准备好的文档。

您还应该使用预定义的jQuery Mobile页面事件。

首先，jQuery Mobile使用Ajax加载内容。因此，通常在jQuery实际加载预定义页面内容之前加载文档就绪。更糟糕的是，准备好文档可能会触发几次（两次以上）。点击/点击事件未正确附加的情况也是如此。

这就是使用jQuery Mobile事件很重要的原因。

如果您想在应用启动时触发一些操作，则可以使用mobileinit事件。

$(document).on("mobileinit", function(){
  //apply overrides here
});

另一方面，如果您想触发某个页面初始化操作，则可以使用pagecreate事件。

$(somePageID).on("pagecreate", function(){
  //apply overrides here
});

查找有关jQuery Mobile事件here的更多信息。