Question

我想知道，为什么在点击按钮样式后会被破坏，如屏幕截图所示？只有在第二次点击后，文字才会改变。

以下是截图： before tapping after tapping 这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="js/cordova-1.8.1.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script>
<style>
#pause
{
color:black;
font-size: 40px;    

}
</style>
<script>
$('#pause').live('tap', function(event){

    if ($('#pause').text() == "Start")
    {
        $('#pause').text("Pause");
    }

    else
    {
        $('#pause').text("Start");
    }


});
</script>
</head>
<body >
<div data-role="page" data-theme="c">
<div data-role="button"  id="pause"> Start </div>
</div>
</body>
</html>

Answer 1

因为，您直接在按钮ID上应用text（）方法。如果你检查元素，你会看到jquery-mobile在你的button-div中添加子元素。

试试这个：

$('#pause .ui-btn-text').text("Pause");

现场演示：
http://jsfiddle.net/nachiket/ww7Sc/

jquery-mobile功能和样式失败

1 个答案: