0

在尝试向我的网站添加点击事件时，我添加了 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>

没有其他的。想法？

4

3 回答 3

1

听起来您缺少 jQuery 移动的样式表（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 元素。

于 2012-12-19T19:07:14.783 回答
1

AFAIK：您不应该将 jQuery.mobile 添加到非全部的 jQuery.mobile-build-site 中。这以许多问题告终。jQuery.mobile 解释 html 代码并对其进行特殊思考，尤其是针对移动站点。

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

这是一个示例解决方案：您首先为需要 jquery.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>

索引.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>

另见演示

于 2012-12-19T19:17:14.287 回答
0

我这样做了：

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

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

于 2013-01-04T16:12:03.637 回答