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: .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 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.
Share Improve this question edited Oct 12, 2012 at 8:42 Thomas asked Oct 12, 2012 at 6:54 ThomasThomas 3552 gold badges6 silver badges12 bronze badges 4- 1 @undefined I love how you're asking him to define selected. ;) – Jeff Commented Oct 12, 2012 at 7:00
- Unselected the buttons are bright grey colored and selected the button has a blue color and the focus (visible with a dashed frame around the button.) – Thomas Commented Oct 12, 2012 at 7:56
- I added a picture to the description to visualize how it looks like: up.picr.de/12133494ev.png – Thomas Commented Oct 12, 2012 at 8:43
- I found the solution in this thread: stackoverflow./questions/7507099/… :-) – Thomas Commented Oct 23, 2012 at 5:37
2 Answers
Reset to default 2Try this:
function nextStep(buttonIndex){
$("#button1 .ui-btn-text").text("Example4").blur();
$("#button2 .ui-btn-text").text("Example5").blur();
$("#button3 .ui-btn-text").text("Example6").blur();
}
If that does not work, try this:
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');
}
I created a fiddle here: http://jsfiddle/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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745489926a4629941.html
评论列表（0条）