CODEWITHSUNDEEP
jqueryjquery-mobilecordova
Sergio
Sergio

Reputation: 529

jquery-mobile functionality and style fail

I'd like to know, why after tapping the button styles are ruined, as is shown on screenshots? And also text doesn't change, only after second tap.

Here are screenshots: before tapping after tapping Here is my code:

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

Upvotes: 1

Views: 185

Answers (1)

Nachiket
Nachiket

Reputation: 6177

Because, you are directly applying text() method of on your button ID. If you inspect element, you will see jquery-mobile adds sub elements in your button-div.

Try this: 

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

Live Demo:
http://jsfiddle.net/nachiket/ww7Sc/

Upvotes: 2

Related Questions