CODEWITHSUNDEEP
jquerymobile
Simone80an
Simone80an

Reputation: 39

Change theme of a button on click in jQuery Mobile

i simply would like to change the theme of a button once it's clicked.

I tried this code http://jsfiddle.net/Ld86H/2/ but doesn't work.

HTML:

<a href="#" id="my-button2" data-role="button" data-theme="e">Test 1</a>

<a href="#" id="my-button2" data-role="button" data-theme="e">Test 2</a>

JS:

$(document).ready("#my-button2").click(function() {
$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-
btn-up-c");
});

In the example i would switch from e theme to c theme once the Test1 or Test2 button is clicked.

I also don't know if i handled in the proper way the click event as in jQuery Mobile the doc says http://demos.jquerymobile.com/1.1.2/docs/buttons/buttons-events.html

Thanks in advice!

Upvotes: 0

Views: 146

Answers (1)

presidentnickson
presidentnickson

Reputation: 1085

Dont use the same ID for multiple elements, i have added a new class called 'mybutton' which you can use multiple times and changed your IDs so they have 1 and 2 at the end.

<a href="#" class="mybutton" id="my-button1" data-role="button" data-theme="e">Test 1</a>

<a href="#" class="mybutton" id="my-button2" data-role="button" data-theme="e">Test 2</a>

Try using this javascript :

$(document).ready(function(){
    $(".mybutton").click(function() {
        $(this).attr("data-theme", "c").removeClass('ui-btn-hover-e').removeClass('ui-btn-up-e').addClass('ui-btn-up-c');
    })
});

See fiddle here : http://jsfiddle.net/Ld86H/3/

Update

New fiddle here : http://jsfiddle.net/Ld86H/4/

Upvotes: 1

Related Questions