Question

在部分视图之后，具有输入提交按钮，通过Ajax调用成功呈现。现在，我想在单击部分视图中的输入提交按钮时进行不同的Ajax调用。但是，此按钮的以下客户端单击事件未触发。相反，当我单击Go按钮时，它直接调用控制器中的action方法（绕过客户端单击事件，因此不会使我的Ajax调用如下所示）。对于测试，我在下面的代码中在Ajax调用之前放置了alert("Test")。但警报没有解雇，为什么？注意：Ajax脚本位于呈现局部视图的同一视图中。

部分视图：

@model myProj.Model.TestViewmodel
<form id="frmID" asp-controller="myController" asp-action="TestAction" method="get">
    List of Proj:<select asp-for="SelectedProjYr" asp-items="Model.lstProjYears"></select> <button type="submit" id="BtnGO" value="UpdateProjBtnGo" class="btn btn-default">GO</button>
</form>

单击上方按钮时调用Ajax ：

$(document).ready(function () {

    $("#BtnGO").click(function () {
        var btnVal = $(this).val();
        alert("Test");
        $.ajax({...
         ...
         ...
        });

});

更新：

关于事件委派的jquery doc之后，我尝试了以下操作，但仍然没有弹出alert('Test')。注意：此处#frmID是BtnGO的父级表单的ID。此外，无论有没有event.preventDefault();行，我都试过了。我还将按钮类型从submit更改为button

$('#frmID').on('click', '#BtnGO', function (event) {
      event.preventDefault();
      alert('Test');
 });

ASP.NET MVC核心 - 客户端部分视图内部按钮的单击事件未触发

0 个答案: