防止 JQuery-Mobile 自动添加 div 元素答案

【问题标题】：Prevent JQuery-Mobile add div element automatically防止 JQuery-Mobile 自动添加 div 元素
【发布时间】：2013-06-20 16:09:47
【问题描述】：

我原来有这样的 div 元素..

<body>
    <canvas id="pageflip-canvas"></canvas>
    <div id="pages">
        <section>

        </section>
    </div>
<script type="text/javascript" src="index.js"></script>
</body>

但是当我使用 JQuery-Mobile 运行时它变成了这样

<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/C:/AppServ/www/guiBook2/index.html"
 tabindex="0"  class="ui-page ui-body-c ui-page-active" style="min-height: 681px;">
    <canvas id="pageflip-canvas" width="1366" height="681"></canvas>
    <div id="pages">
        <section style="z-index: 1;">

        </section>
    </div>
<script type="text/javascript" src="index.js"></script>

</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body>

如何防止它创建这些 DIV 我对 css 类没问题

但额外的 div 会使内容宽度发生变化。

提前致谢

【问题讨论】：

你在这个 jquery 中放置的任何东西都不会触及这个
您无法控制这一点，因为 JQM 通过 Ajax 将其转换为页面，以便可访问。您可以使用 data-role=content 包裹您的画布并调整您的画布 CSS。

标签： jquery html css jquery-mobile

【解决方案1】：

这是不可能的。如果使用 jQuery Mobile，它将接管 Web 应用程序。这是意料之中的，因为 jQuery Mobile 不是经典框架。因为一切都是通过 ajax 完成的，所以每个内容都必须用 data-role="page" 属性包装到 DIV 中。如果这个 DIV 不像这个问题那样存在，它将自动创建并且无法阻止。

有几种方法可以防止内容被 jQuery Mobile CSS 设置样式，但没有什么可以防止内容被包装到 data-role="page"强> DIV。

如果您想了解有关这些方法的更多信息，请查看我的 ARTICLE，为了透明，这是我的个人博客。或者找到它HERE。一切都在以下章节中进行了描述：标记增强预防方法。

底部的DIV-s也是需要的，因为它们也用于指示页面/内容加载，基本上它是一个必要的jQuery Mobile组件。但是如果 AJAX 被关闭，它可以被删除。但是如果 AJAX 被关闭，那么 jQuery Mobile 又有什么意义呢。

还有最后一件事要考虑，如果只需要一些 jQuery Mobile 功能，那么可以重新构建框架，使其仅包含所需的功能。这个链接可以找到HERE，别忘了选择需要的jQuery Mobile版本。

【讨论】：