Question

背景

我正在使用ASP.NET MVC。我有一个包含JavaScript的局部视图。我正在使用AJAX get将部分视图加载到<div>标记中。 JavaScript为一组单选按钮注册一个click事件。

问题

似乎没有执行：单击单选按钮时，表单不会被提交。

以下是我的部分观点：

<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
   {%>
    <p>Is supervisor approval required?</p>
    <label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { @class = "IsSupervisorApprovalRequiredYes" })%>
    <label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { @class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">
    $("#IsSupervisorApprovalRequired").click(function() {
        $("form#IsSupervisorApprovalRequiredForm").submit();
    });
</script>

问题

加载部分视图时是否会执行JavaScript？

Answer 1

是和否。您的方案中的执行顺序如下：

请求页面
ASP.NET将部分视图呈现到父页面
Javascript在整个页面上执行

针对您的特定问题。在实际绑定到事件之前，您需要在页面加载时加载该Javascript代码段。您的代码应如下所示：

<% using (Ajax.BeginForm(ActionName.Approve, ControllerName.Supervisor, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result"}, new { id = "IsSupervisorApprovalRequiredForm" }))
   {%>
    <p>Is supervisor approval required?</p>
    <label for="IsSupervisorApprovalRequired">Yes</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "0", new { @class = "IsSupervisorApprovalRequiredYes" })%>
    <label for="IsSupervisorApprovalRequired">No</label><%=Html.RadioButton("IsSupervisorApprovalRequired", "1", new { @class = "IsSupervisorApprovalRequiredNo" })%>
<%} %>
<script type="text/javascript">

    $(function() {
        $("#IsSupervisorApprovalRequired").click(function() {
            $("form#IsSupervisorApprovalRequiredForm").submit();
        });
    });

</script>

Answer 2

将语句包装在$(function() {...});中，以便在文档准备就绪时调用它。

所以它看起来像这样：

$(function() {
    $("#IsSupervisorApprovalRequired").click(function() {
        $("form#IsSupervisorApprovalRequiredForm").submit();
    });
});

Answer 3

这也可能是由HtmlHelper生成的HTML引起的。不允许使用具有相同ID的多个HTML元素，但帮助程序将生成如下内容：

<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />
<input id="IsSupervisorApprovalRequired" name="IsSupervisorApprovalRequired" type="radio" />

因此，当您将“#IsSupervisorApprovalRequired”与jQuery匹配时，它正在寻找具有该ID的元素。由于其中两个存在，该函数将仅绑定到第一个，导致第二个单选按钮的“单击”事件永远不会触发。

作为替代方案，试试这个：

$("input[name=IsSupervisorApprovalRequired]").click(function () { /* ... */ });

此方法检查元素的“name”属性而不是ID。由于与ID不同，“name”值不必是唯一的，因此jQuery能够处理与该模式匹配的多个元素，并且应该正确绑定事件。

加载部分视图时JavaScript是否会被执行？

背景

问题

问题

3 个答案: