I have a problem with link buttons at jQuery. The most forum entries I found at the web with searching for “jQuery link button deselect” handle about form buttons or checkboxes and not link buttons. So I hope someone here can help me :-).
Problem description: I have some static link bottons at my web page and with clicking on it I call a javascript function and change the text at the buttons. Now my problem is that the buttons are still selected after changing the text and this is what not should be.
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="basic.js" type="text/javascript"></script>
</head>
<body>
...
<a href="#" data-role="button" onmouseup="nextStep(1)" id="button1">Example1</a>
<a href="#" data-role="button" onmouseup="nextStep(2)" id="button2">Example2</a>
<a href="#" data-role="button" onmouseup="nextStep(3)" id="button3">Example3</a>
...
</body>
basic.js
function nextStep(buttonIndex){
$("#button1 .ui-btn-text").text("Example4");
$("#button2 .ui-btn-text").text("Example5");
$("#button3 .ui-btn-text").text("Example6");
}
The code above is an example what I am doing. How described at the beginning after setting the new text the button is still selected. Does anybody know a solution to deselect the button?
Picture of selected button: http://up.picr.de/12133494ev.png
Thanks for helping :-).
Thomas
————————-
Thank you for your fast response. I tried the proposal
function nextStep(buttonIndex){
$("#button1 .ui-btn-text").text("Example4").removeClass('ui-btn-active');
$("#button2 .ui-btn-text").text("Example5").removeClass('ui-btn-active');
$("#button3 .ui-btn-text").text("Example6").removeClass('ui-btn-active');
}
Unfortunately, it does not work as expectect. More precisely I can not see any changes in behavior.
Note, it’s possible your page has other elements going on that would cause such a behavior.
The buttons are part of a page with other elements (headline and table) where I change contents via javascript. But for me it is not clear how this should influence the behavior of the buttons.
Examples:
var table = document.getElementById('solution');
var cell = table.rows[1].cells[1];
cell = table.rows[2].cells[1];
cell.firstChild.data = "";
cell = table.rows[3].cells[1];
cell.firstChild.data = "";
cell = table.rows[4].cells[1];
cell.firstChild.data = "";
...
or
$("#headline").empty();
headlineOutput = "Buttons";
$("#headline").append(headlineOutput);
Any suggestions or hints?
Thank you.
————————-
function nextStep(buttonIndex){
$("#button1 .ui-btn-text").text("Example4").blur();
$("#button2 .ui-btn-text").text("Example5").blur();
$("#button3 .ui-btn-text").text("Example6").blur();
}
This proposal does also no changes in behavior :-(.
I am missing something like the Qt functions “setCheckable(false) and setFocusPolicy(Qt::NoFocus)” ;-).
Thanks for helping.
I created a fiddle here: http://jsfiddle.net/japanick/Lc9rp/
It works as expected, starting with the code you have. Can you give it a try and see if it’s working how you expected. Note, it’s possible your page has other elements going on that would cause such a behavior.