0

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

在视图中..

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

4

2 回答 2

2

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

$(document).ready(function() {
    $('.radioGroup input').on('ifClicked', function() {
        alert('Radio clicked');
    });
});
于 2014-12-11T15:45:03.297 回答
0

请尝试以下方法；

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

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

于 2014-12-09T14:25:02.990 回答