添加 jquery mobile 将文本添加到现有的 html 按钮答案

【问题标题】：adding jquery mobile adds text to existing html buttons添加 jquery mobile 将文本添加到现有的 html 按钮
【发布时间】：2012-12-19 18:43:54
【问题描述】：

在尝试向我的网站添加点击事件时，我添加了 jquery mobile，以便我的按钮可以在台式机和平板电脑上使用。

但是，我所有现有的按钮现在旁边都有额外的文字。在添加 jquery mobile 之前，我有一个名为“添加相机”的按钮。现在添加 jquery mobile 它具有相同的按钮，但旁边是一些与按钮同名的文本：“添加相机”。

简单的按钮：

<button class="addwebcam">Add camera</button>

只想添加绑定事件：

jQuery('.addwebcam').bind('click tap', function() {
    jQuery('#cameraformwebcam').show();
    jQuery('.addwebcam').hide();
});

如果您查看 html 源代码，它不会显示额外的文本，我也看不到任何错误。

我应该注意我添加了：

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

没有别的了。想法？

【问题讨论】：

您是否使用过firebug（或任何其他类似的浏览器插件）来检查问题所在？普通的 html 源代码什么都不告诉你，因为新的 jQM GUI 标记是通过 js 构建的，所以你将无法通过基本的 html 源代码看到它。

标签： jquery jquery-mobile

【解决方案1】：

听起来您缺少 jQuery mobile 的样式表（CSS 文件）。

使用 JQM 按钮会给你的 DOM 引入额外的标记，所以如果你不使用他们的样式表，你也需要设置额外的标记样式。

当您将常规 HTML 按钮转换为 jQuery 移动按钮时会发生这种情况：

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Button element</span>
  </span>
  <button class="ui-btn-hidden" aria-disabled="false">Button element</button>
</div>

正如 Gajortres 在 cmets 中提到的，您需要检查 DOM 而不是查看源代码以查看在 JavaScript 中创建的更新后的 DOM 元素。

【讨论】：

感谢您的解释。样式不是我想要的，所以我可以去编辑 css 还是有更好的方法来做到这一点？
如果您使用 jQuery mobile 的全部目的是 tap 事件，那么您可以使用 touchstart 和 touchend 事件滚动您自己的事件。

【解决方案2】：

AFAIK：您不应该将 jQuery.mobile 添加到一个不完整的 jQuery.mobile-build-site。这以许多问题告终。 jQuery.mobile 解释了 html 代码并对其进行了特别的思考，尤其是针对移动网站。

我的解决方案是构建一个新的 HTML 文件，该文件仅包含按钮所需的所有内容，并将其放置在带有 iframe 的原始页面中。我认为这是不与其他 javascript 冲突的最安全的解决方案。

这是一个示例解决方案：您首先为需要 jquery.mobile() 的按钮创建一个文件。

mobile.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
        <link type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" rel="stylesheet" />

        <script type="text/javascript">
            jQuery(document).ready(function() {
                if (inIframe()) {
                    var $links = jQuery('a[href]');

                    $links.unbind('click').click(function(event) {
                        event.preventDefault();

                        var $this = jQuery(this);
                        var href = $this.attr('href');

                        window.parent.location.href = href;
                    });
                }
            });

            var inIframe = function() {
                return (top != self);
            };
        </script>

        <style type="text/css">
            [data-role="page"] {
                background-image: none;
                background-color: white;
            }
            [data-role="button"] {
                margin-left: 3px;
                margin-right: 3px;              
            }
        </style>
    </head>
    <body>
        <a href="http://stackoverflow.com/a/13959531/655224" data-role="button">Tutorial</a>
    </body>
</html>

index.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style type="text/css">
            iframe {
                border: 0 none;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe src="mobile.html" width="150" height="50" scrolling="no" />
    </body>
</html>

另请参阅DEMO

【讨论】：

有趣，这正是我想要做的。您可以提供任何资源来解决问题吗？
不，当我意识到这个问题时，我实际上是从我的解决方案开始的。我不想解决即将出现的问题;-)。也许我明天可以展示一些代码。有一点耐心。
+1，因为它是一个有趣的解决方案。我决定采用touchstart 事件的方式。特别是 Rafael Fragoso 找到的这个解决方案here。这样我就不需要 jquery mobile。
谢谢，嘿，我对这个解决方案没有任何问题。我认为这是最安全的。我之所以这样做，是因为我想在站点中使用 jQuery.mobile-datebox-slidebox (dev.jtsage.com/jQM-DateBox2)。如果没有 jquery.mobile，这个控件是 afaik 不可用的。使用 iframe，所有问题都消失了。而且我知道的每个浏览器都兼容 iframe，甚至 IE6 ;)

【解决方案3】：

我做到了：

$('#button').parent().find('.ui-btn-text').text('');

它对我有用，不是我想要的，但很好！ :)

【讨论】：