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

Answer 2

Please try the following instead;

        $(document).on('click', '.radioGroup', function() {
            alert('Radio Clicked');
        });

You can try 'change' instead of click. I believe the reason it simply does not work with your project is because you are simply rendering the buttons dynamically so the dom element does not occur at first. So there are 2 possible solutions, something that will listen to the dom elements at all times or you can include the in the rendering block. Also, if your script is in the top of your _Layout.html then move it to bottom as that could help too.