Function on radio button click not firing

Question

I'm trying to call a function when a radio button is clicked but it's not working. I have this fiddle doing basically just what I want it to do, but it's not working in my code.

In the view..

<script>
$(document).ready(function () {
    $(".radioGroup").click(function () {
        alert("radio clicked");
    });

    $(".buttonGroup").click(function () {
        alert("button clicked");
    });
});
</script>
@* bunch of html *@
@* bunch of html *@
<div id="medicalRadioGroup" class="check-list clear">
    <ul>
        <li style="display:inline;">
            @Html.RadioButtonFor(model => model.MedicalSeverity, "none", new { @id = "MedicalSeverity_None", @name = "radioGroup", @class="radioGroup", @checked = "checked" }) 
            <label for="MedicalSeverity_None"><span>None</span></label>
        </li>
        <li style="display:inline;">
            @Html.RadioButtonFor(model => model.MedicalSeverity, "minor", new { @id = "MedicalSeverity_Minor", @name = "radioGroup", @class = "radioGroup"}) 
            <label for="MedicalSeverity_Minor"><span>Minor</span></label>
        </li>
        <li style="display:inline;">
            @Html.RadioButtonFor(model => model.MedicalSeverity, "major", new { @id = "MedicalSeverity_Major", @name = "radioGroup", @class = "radioGroup"}) 
            <label for="MedicalSeverity_Major"><span>Major</span></label>
        </li>
    </ul>
</div>
<div>
    <button class="buttonGroup">Click me</button>
</div>

Which renders into...

<div id="medicalRadioGroup" class="check-list clear">
    <ul>
        <li style="display:inline;">
          <div class="iradio_square-aero checked">
              <input checked="checked" class="radioGroup" data-val="true" data-val-length="The field Medical Severity must be a string with a maximum length of 10." data-val-length-max="10" data-val-required="*" id="MedicalSeverity_None" name="MedicalSeverity" type="radio" value="none" style="position: absolute; opacity: 0;">
              <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>
          </div>
          <label for="MedicalSeverity_None">
              <span>None</span>
          </label>
        </li>
        <li>etc</li>
        <li>etc</li>
    </ul>
</div>

So here, if the button is clicked, the function fires the alert. If a radio button is clicked, nothing happens. In summary, what works in the fiddle doesn't seem to be working here. Thoughts? I also tried to use .change() to get the radio button event (this would also be an acceptable solution), but that didn't work either. Something to do with Razor maybe?

Answer 1

The hint here is in the rendered HTML tag...

<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>

The inputs are being managed by the iCheck plugin, which catches the 'click' event and stops propagation. To get this event, use the iCheck methods provided. As per the API:

$(document).ready(function() {
    $('.radioGroup input').on('ifClicked', function() {
        alert('Radio clicked');
    });
});