How can I stop the browser viewport moving to the top of the page when the user clicks on a jQueryUI radio button?
- by ben
I have got some radio buttons setup like this:
<div id="typeRadios">
<input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
<input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>
That I turn into jQueryUI buttons like this:
$("#typeRadios").buttonset();
This is the resulting HTML:
<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label>
The buttons work, but whenever I click one, the browser view-port gets returned to the top of the page, the same way it happens when you click on a <a href="#">link</a> link.
I am using jQuery 1.4.2 and jQueryUI 1.8.7. How can I prevent this behaviour? Thanks for reading.
EDIT: The <a href="#">link</a> part was missing.
