单选按钮上的功能单击不触发

Function on radio button click not firing

本文关键字：单击 功能 单选按钮      更新时间：2023-09-26

我正在尝试在单击单选按钮时调用函数，但它不起作用。我让这个小提琴基本上只是我想要它做的事情，但它在我的代码中不起作用。

在视图中..

<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>

这呈现为...

<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>

因此，在这里，如果单击该按钮，该函数将触发警报。如果单击单选按钮，则不会发生任何反应。总之，在小提琴中起作用的东西似乎在这里不起作用。思潮？我还尝试使用 .change() 来获取单选按钮事件（这也是一个可接受的解决方案），但这也没有用。也许与剃刀有关？

这里的提示在呈现的 HTML 标记中...

<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>

输入由 iCheck 插件管理，该插件捕获"click"事件并停止传播。若要获取此事件，请使用提供的 iCheck 方法。根据 API：

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

请尝试以下操作;

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

您可以尝试"更改"而不是点击。我相信它根本不适用于您的项目的原因是因为您只是动态渲染按钮，因此一开始不会出现 dom 元素。因此，有 2 种可能的解决方案，它们将始终侦听 dom 元素，或者您可以将 包含在渲染块中。此外，如果您的脚本位于_Layout.html的顶部，请将其移动到底部，因为这也会有所帮助。

相关文章：