How to detect jQuery UI radio change event?

Asked 27/12, 2012 at 19:26 Answered 27/12, 2012 at 19:39

Solved jquery jquery-ui events radio-button

I have 2 radio controls:

<fieldset id="sort">
                <label for="sort">Sort: </label>
                <input class="sortDirection" type="radio" id="asc" name="sortDirection"><label for="asc">asc</label>
                <input class="sortDirection" type="radio" id="desc" name="sortDirection"><label for="desc">desc</label>
</fieldset>

Here's the jquery I am using:

$(document).ready(function(){
        $('#sort').buttonset();
});

$('#asc').on("change", function(event){
        alert("CHANGE EVENT!");
});

I also tried (with same results):

$('#sort input[type="radio"]').on("change", function(event){
        alert("CHANGE EVENT!");
});

The alert is never executed. What am I doing wrong here?

Uwton answered 27/12, 2012 at 19:26 Comment(3)

Have you tried on change event? – Varitype 27/12, 2012 at 19:29

Seems to be working here .. jsfiddle.net/rcK9h – Gust 27/12, 2012 at 19:33

@Sushanth, it didn't work because even listeners should be inside onload function. – Uwton 27/12, 2012 at 19:39

Events must be within the $(document).ready or window.onload

this code :

$(document).ready(function(){
        $('#sort').buttonset();
});

should be

$(document).ready(function(){
        $('#sort').buttonset();

        // events  
        $('#asc').on("change", function(event){
              alert("CHANGE EVENT!");
        });
});

Matriarchy answered 27/12, 2012 at 19:36 Comment(1)

If the event is attached to an element the code needs to run after the DOM tree has been generated or else it will not find what it's looking for, with $(document).ready(); you check that it is;. – Flavone 27/6, 2014 at 18:19

$(document).on("change", ".sortDirection", function(){
    alert("changed");
    //insert code here
});

EXAMPLE

I would suggest using the change event instead of the click event. change does not fire again when the same option is clicked twice.

Aarika answered 27/12, 2012 at 19:32 Comment(3)

Please make sure your code is within the $(document).ready(function(){ ... });. Plus, the current implementation of $("#asc").change() will only fire when the element with id of asc is selected, and not when either radio buttons are selected. – Aarika 27/12, 2012 at 19:37

#asc was just to test, I will use #sort once I have it working, my code didn't work because it wasn't inside .ready but your example doesn't work even if inside .ready. – Uwton 27/12, 2012 at 19:43

Does the example on jsfiddle not work correctly for you? Because this is the correct implementation for a change event using on. – Aarika 27/12, 2012 at 19:48

try this

$('.sortDirection').click(function(event){
        alert("CHANGE EVENT!");
});

Hudgins answered 27/12, 2012 at 19:29 Comment(3)

click(fn) is just a shortcut to on('click', fn) – Varitype 27/12, 2012 at 19:31

@elclanrs, are you saying that shortcuts are not meant to be used? :) – Praseodymium 27/12, 2012 at 19:34

I think what he was saying is that you didn't need to change my code (possibly making me and other think that .on was the mistake). – Uwton 27/12, 2012 at 19:45

Since '#sort' is the buttonset, I think it should be:

$('#sort').on("change", function(event){
    alert("CHANGE EVENT!");
});

Terryl answered 27/12, 2012 at 19:39 Comment(2)

@Uwton For sure you have to bind the click/ change event when the document is ready, but in the fiddle you can click the desc button without and nothing happens, although the state of asc is changing. Therefore I think it would be better to bind the event on the parent element. – Terryl 27/12, 2012 at 19:49

Like I said in other comments, I only used #asc in this example for simplicity. – Uwton 27/12, 2012 at 19:50

Recommended topics

Hot tags