CODEWITHSUNDEEP
javascriptjqueryhtml
gene b.
gene b.

Reputation: 12034

jQuery Radio Button onChange Not Working

I followed this example to capture an onChange() jQuery event for a radio button group: JQuery $(#radioButton).change(...) not firing during de-selection

But in my case, the solution given in that example is not working. I have the following generated from my JSP:

<input id="object.reportEntity.reportEntityIsPrime1" name="object.reportEntity.reportEntityIsPrime" type="radio" value="Y_YES" checked="checked"/>Prime                             

<input id="object.reportEntity.reportEntityIsPrime2" name="object.reportEntity.reportEntityIsPrime" type="radio" value="N_NO"/>Not Prime

JS:

$(document).ready(function() {      

    // Display Alert on Radio Change    
    $('input[name=object.reportEntity.reportEntityIsPrime]:radio').change(function () {
        alert('Radio Button clicked');
    }); 
}

The alert is not being diplayed. Also, there's this error:

Syntax error, unrecognized expression "input"

Upvotes: 1

Views: 2690

Answers (3)

scniro
scniro

Reputation: 16989

You should delegate the events.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Also, you need to add " in your selector e.g. [name=""] Observe the following...

$('body').on('change', 'input[name="object.reportEntity.reportEntityIsPrime"]:radio', function() {
    alert('Radio Button clicked');
});
  • side note: you are missing ); on the end of your ready function

JSFiddle Link - working demo

Also, be sure to check out the jQuery Understanding Event Delegation docs for more info

Upvotes: 5

Solomon A.
Solomon A.

Reputation: 491

Quote the name attribute in your selector string.

  $(document).ready(function() {      

            // Display Alert on Radio Change    
    $('input[name="object.reportEntity.reportEntityIsPrime"]:radio').change(function () {
                alert('Radio Button clicked');
            });

    }

Upvotes: 1

twain
twain

Reputation: 1325

Use quote marks for your name like this:

 $('input[name="object.reportEntity.reportEntityIsPrime"]:radio')

Upvotes: 1

Related Questions