3

I have a situation where an element, of type radio, is contained in an element. The anchor element has a href but I want to override that behaviour by adding a jQuery 'click' handler to the element.

The click handler makes the radio button inside it the selected one within the group. This all works when the anchor is clicked, however, when the radio button is clicked it appears that jQuery resets the selected radio to the previously selected one!

Here is a the simplified page that duplicates the issue:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#a1").click(function(event) {
                anchorClicked("a1");
                return false;
            });
            $("#a2").click(function(event) {
                anchorClicked("a2");
                return false;
            });
        });

        function anchorClicked(anchorId)  {
            $('#' + anchorId + ' input:radio').attr("checked", true);
            alert("Look at what is selected and what happens after the event when this dialog is closed!");
        }
    </script>
</head>
<body>
    <form>
        <ul>
            <li id="li1"> 
                <a id="a1" href="javascript:alert('default functionality')">
                    <input value="1" name="rb" type="radio" id="rb1">
                    <span>Details 1</span>
                </a>
             </li>
            <li id="li2"> 
                <a id="a2" href="javascript:alert('default functionality')">
                    <input value="2" name="rb" type="radio" id="rb2">
                    <span>Details 2</span>
                </a>
             </li>
        </ul>
    </form>
</body>

Does anyone have any idea how I can prevent jQuery for resetting the radio button?

Improve this question

5 Answers 5

Reset to default
3 
<script type="text/javascript">
    $(document).ready(function() {
        $("input:radio").click(function(event){event.stopPropagation();});

    });
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Sorry Jishnu this doesn't correct the issue. The previously selected radio button remains selected after clicking on the unselected one.
@Jishnu So it turns out that you had the answer as well.
Jishnu/Marcus, although this solution allows the radio button to be selected it bypasses the anchorClicked method, which I still need to be called.
give attribute name='somename' to all the radio buttons that you want to bypass the click event and use the code $("input[name='somename']").click(function(event){event.stopPropagation();})
0

This is a slightly strange way of doing things. You can get the effect you are after by first using a label element instead of the span like so:

<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>

By doing this clicking anywhere in the label element will select the radio button.

From there you should watch for a change event on the radio buttons if you want to:

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});
Improve this answer

3 Comments

Marcus, I appreciate the help. however I'm stuck with anchor elements.
Sorry cut short my comment. The html is generated by an ASP.Net application and the anchors are from LinkButtons. [N.B. I can't change the LinkButtons to anything else.
Not a problem, I have added another answer which deals with that limitation.
0

The easiest way I've found to solve this issue is to remove the href attribute from the anchor element during the click event:

  $("#a1").click(function(event) {
    this.removeAttribute("href");            
    anchorClicked("a1");
  });

This means I no longer need to return false to prevent the default behaviour and the event can bubble up the DOM safely and everything then works.

Improve this answer

3 Comments

Just noticed you beat me to it. :) Yes, the problem is the cancellation of the radio buttons change event so this works.
But you cannot click an anchor that does not have a href attribute, well its not a valid tag at least.
The browser might not provide a visual indicator that it is a link but I think I can provide a :hover css rule to change the pointer, which I've yet to do so can't be certain.
0

The problem is that your "return false" to cancel the default anchor tag behaviour is also cancelling the behaviour of the clicking on the radio button so it sets it back to what it was originally, regardless of the actions of the click event. Setting the fucntions to return true exhibits the expected behaviour (as well as the default click function).

To fix it finally you want to get rid of the default click event completely. To do this you could very simply change the href to "#" so that it doesn't do much when actioned. See http://jsfiddle.net/FrcRx/1/ for an example of this in action.

the best way to do it would be to remove the href attribute completely. This of course makes most browsers not consider it a link so you would need to apply appropriate styling yourself to make them look like links still.

This is done with the removeAttr jquery function and the addClass function. See a demo of it here: http://jsfiddle.net/FrcRx/2/

Improve this answer

Comments

0 
$('input:radio').click(function(e) { 
    e.stopPropagation();
});

$('a[id^="a"]').click(function(e) {
    $('input:radio:first', this).attr("checked", true);
    return false;
});

The important part is stopping propagation of the click event when the radio button is clicked. However it seems that if you return false then the radio button is not select as you would expect it to be.

Next we bind the click event to any a tag which has an id starting with the letter "a". When clicked the first radio button input inside of the a tag is selected and then checked.

DEMO: http://jsfiddle.net/marcuswhybrow/mg66T/2/

Improve this answer

6 Comments

Marcus, that does the same as my anchorClicked method in the question. The issue is that once one of the radio buttons is selected it isn't possible to select the other one by clicking on it. It is initial selected but becomes deselected once the click event handler has completed.
Have you tried this code (modified to add return false), I assumed yours did not work because of the slightly complicated setup. There is no reason why this would not work.
@Marcus Whybrow : Your assumptions were false. It didn't work because your return false is cancelling the action of the radio button and thus changing the fact that it is changed. See my answer for some examples demonstrating this in action.
@GrievousAngel I turned your code into a demo here and it seems to work perfectly. So there must be some other problem.
@GrievousAngel I see what you mean now, the problem seems to be that the radio button is clicked and then the anchor is clicked.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.