Question

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

但是我现有的所有按钮现在旁边都有额外的文字。在添加jquery mobile之前，我有一个名为“Add camera”的按钮。现在添加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>

没有别的。想法？

Answer 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在评论中提到的那样，你需要检查DOM而不是查看源代码来查看用JavaScript创建的更新的DOM元素。

Answer 2

AFAIK：你不应该将jQuery.mobile添加到一个不完整的jQuery.mobile-build-site。这结束了许多问题。 jQuery.mobile解释了html代码，特别是对移动网站特别考虑。

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

以下是一个示例解决方案：首先为需要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

Answer 3

我做到了：

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

它对我有用，不是我想要的，但很好！：）

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

3 个答案: