Question

我正在尝试在单击单选按钮时调用某个函数，但它无法正常工作。我有fiddle基本上就是我想要它做的事情，但它在我的代码中不起作用。

在视图中..

<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()来获取单选按钮事件（这也是一个可接受的解决方案），但这也不起作用。可能与Razor有关吗？

Answer 1

这里的提示位于呈现的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 plugin管理，捕捉“点击”事件并停止传播。要获取此事件，请使用提供的iCheck方法。根据API：

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

Answer 2

请尝试以下方式;

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

您可以尝试'更改'而不是点击。我认为它根本不适合你的项目的原因是因为你只是动态地渲染按钮所以dom元素最初不会发生。因此，有两种可能的解决方案，可以随时监听dom元素，也可以将其包含在渲染块中。此外，如果您的脚本位于_Layout.html的顶部，则将其移至底部，因为这也有帮助。

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

2 个答案: