jQuery Radio Button onChange Not Working

Question

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"

JavaScript (JS) error. I suspect it's because of the dots used in the name. — gene b.
– gene b., Commented Nov 3, 2015 at 19:14

scniro · Accepted Answer · 2015-11-03 19:23:48Z

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

twain · Accepted Answer · 2015-11-03 19:18:36Z

Use quote marks for your name like this:

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

Solomon A. · Accepted Answer · 2015-11-03 19:18:41Z

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

Collectives™ on Stack Overflow

jQuery Radio Button onChange Not Working

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related