Jquery移动选择菜单在文档加载时复制

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。