Radio button inside anchor element is reset after jQuery click handler

StackOverflow https://stackoverflow.com/questions/4614371

Question

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?

Was it helpful?

Solution 3

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.

OTHER TIPS

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

    });

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');
    }
});

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/

$('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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top