How to detect jQuery UI radio change event?

Question

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?

Answer 1

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!");
        });
});

Answer 2

$(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.