添加jquery移动添加文本到现有的html按钮

在尝试添加点击事件到我的网站我已经添加jquery移动，以便我的按钮可以在桌面和平板电脑上工作。添加jquery移动添加文本到现有的html按钮

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

简单的按钮：

<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>

没有别的。想法？

来源

2012-12-19 Tom

你用萤火虫（或任何其他类似的浏览器插件）来检查什么是错的？正常的html源文件不需要告诉你什么，因为新的jQM GUI标记是通过js构建的，所以你将无法通过基本的html源代码看到它。 – Gajotres

听起来像你缺少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-19 19:07:14 Quantastical

感谢您的解释。造型不是我想要的，所以我可以去编辑CSS或者有更好的方法来做到这一点？ – Tom

如果你所使用的jQuery mobile是'tap'事件，那么你可以使用'touchstart'和'touchend'事件来推出自己的事件。 – Quantastical

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

来源

2012-12-19 19:17:14 algorhythm

有趣的是，这正是我想要做的。您可以提供哪些资源，最终会出现问题？ – Tom

不，当我意识到这个问题时，我真的开始使用我的解决方案。我不想解决即将出现的问题;-)。也许我明天可以展示一些代码。有一点耐心。 – algorhythm

@Tom ok，updated;） – algorhythm

我这样做：

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

它为我工作，不是我想要的，但它很好！:)

来源

2013-01-04 16:12:03 user1899590

添加jquery移动添加文本到现有的html按钮

回答

相关问题