Извиняется ли JavaScript при загрузке частичного представления?

Question

Фон

Я работаю с ASP.NET MVC. У меня есть частичное представление, которое содержит JavaScript. Я использую AJAX для загрузки частичного представления в тег <div>. 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">
    $("#IsSupervisorApprovalRequired").click(function() {
        $("form#IsSupervisorApprovalRequiredForm").submit();
    });
</script>

Вопрос

Выполняется ли JavaScript при загрузке частичного представления?

Answer 1

Да и нет. Порядок выполнения в вашем сценарии выглядит следующим образом:

1. Страница получает запрос
2. ASP.NET визуализирует частичное представление на родительской странице
3. 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

Это также может быть вызвано HTML, созданным HtmlHelper. Несколько элементов HTML с одинаковым идентификатором не допускаются, но помощник сгенерирует что-то вроде:

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

В результате, когда вы сопоставляете "#IsSupervisorApprovalRequired" с jQuery, он ищет элемент с этим идентификатором. Поскольку два из них существуют, функция будет привязана только к первому, в результате чего событие «щелчка» второго переключателя никогда не сработает.

В качестве альтернативы попробуйте это:

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

Этот подход проверяет атрибут "name" элемента вместо его ID. Поскольку значения "name", в отличие от идентификаторов, не обязательно должны быть уникальными, jQuery может обрабатывать несколько элементов, соответствующих этому шаблону, и должен правильно связывать событие.

Answer 3

Оберните оператор в $(function() {...});, чтобы он вызывался, когда документ готов.

Так это будет выглядеть примерно так:

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