Question

我目前正在开发一个ASP.NET MVC项目。由于我正在使用的其中一个组件的限制，我的单选按钮需要放在标签标签内。但是，当我尝试在所述单选按钮上注册更改处理程序时，永远不会调用该处理程序。粗略地看一眼类似的问题让我感到不安。

以下是JavaScript代码：

$(document).ready(function () {
    $("input[name=registrationType]").click(function() {
        alert("It works!");
    });
});

这是相关的cshtml：

<div class="radio">
    <label for="registrationType1">@Html.RadioButtonFor(model => model.registrationType, "type1", new { @id = "registrationType1", @required = "required" }) Option 1</label>
</div>
<div class="radio">
    <label for="registrationType2">@Html.RadioButtonFor(model => model.registrationType, "type2", new { @id = "registrationType2", @required = "required" }) Option 2</label>    
</div>

我的问题是，我可以对jQuery代码进行哪些更改来注册更改处理程序？不幸的是，从标签中取出单选按钮是不可取的，因为我知道这可以立即解决问题。

非常感谢任何帮助！

编辑：根据要求，这里是呈现的HTML：

<div class="radio">
    <label for="registrationType1"><input class="registrationType" data-val="true" data-val-required="Please indicate your registration type" id="registrationType1" name="registrationType" required="required" type="radio" value="type1" /> Option 1</label>
</div>
<div class="radio">
    <label for="registrationType2"><input class="registrationType" id="registrationType2" name="registrationType" required="required" type="radio" value="type2" />Option 2</label>    
</div>

Answer 1

一种可能的解决方案是将事件处理程序放在父元素（例如围绕所有单选按钮的<div>）上。然后，您可以通过检查event对象的target属性来检测单击的特定元素。这样做的好处是只需要设置一个事件处理程序，有时可以更容易编码，更好地进行内存管理。

有关检查target属性（包括某些IE兼容性）的更多详细信息，请执行以下操作：Javascript click event handler - how do I get the reference to the clicked item?

为什么将事件处理程序放在父级上的一个方便的解释甚至在这里首先起作用：http://www.quirksmode.org/js/events_order.html

无法在<label>标签</label>中注册单选按钮的更改处理程序

1 个答案: