添加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按鈕

回答

相關問題