javascript - Jquery on Change 函数未在 asp.net MVC 中触发

Question

Jquery on Change 函数未在 asp.net MVC 中触发

免责声明:这可能看起来像是一个常见问题，但请耐心阅读并读到最后。

我有两个文件，即 CreateProject.cshtml 和 projectMasterNew.js
CreateProject.cshtml

    
    <div class="form-group">
        @Html.LabelFor(model => model.Account.AccountName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Account.AccountName, new SelectList(ViewBag.GetAccount, "AccountId", "AccountName"))
            @Html.ValidationMessageFor(model => model.Account.AccountName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Account.DMName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Account.DMName, new SelectList("", "DMId", "DMName"))
            @Html.ValidationMessageFor(model => model.Account.DMName, "", new { @class = "text-danger" })
        </div>
    </div>
    <script src="~/Scripts/DMS/projectMasterNew.js"></script>
    <script>
        var getDmUrl = '@Url.Action("GetDMList", "Project", new { area = "Masters" })';
    </script>
    
    

projectMasterNew.js

    
    $(document).ready(function () {
        alert($("#Account_AccountName").val());
        $("#Account_AccountName").on("change", function () {
            alert($("#Account_AccountName").val());
            var jsonData = { account: $(this).val() };

            getJsonCall("Project Creation", getDmUrl, jsonData, function (response) {
                var dName = $('#Account_DMName');
                alert("Dropdwn update");
            });
            alert("Success");
        }, false);
    });
    
    

The above jquery code worked until this morning.
Problem:
The script was being accessed at the time of page load, since I got the alert before the function. But the change event did not trigger on when I changed the value in the AccountName dropdown. I tried calling the change method as follows:
1.

$(document).on("change", "#Account_AccountName", function () {

2.

$("#Account_AccountName").change(function () {

没有结果。

因此，经过一番研究，我实现了以下

    
    function DmList() {
        alert($("#Account_AccountName").val());
        var jsonData = { account: $("#Account_AccountName").val() };

        getJsonCall("Project Creation", getDmUrl, jsonData, function (response) {
            var dName = $('#Account_DMName');
            $.each(response, function (index, item) { 
                dName.append($('').text(item.DMName).val(item.DMId));
            });
            alert("Dropdwn update");
        });
        alert("Success");
    }
    @Html.DropDownListFor(model => model.Account.AccountName, new SelectList(ViewBag.GetAccount, "AccountId", "AccountName"), new { onchange = "DmList()"})
    
    

As you'll notice, the jquery function isn't called on Document Ready. That is because, adding that also threw an error

For those wondering, my BundleConfig.cs has

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

我的 _Layout.cshtml 有

@Scripts.Render("~/bundles/jquery")

我想知道为什么这是一个问题，以及我可以采取哪些措施来避免将来出现此类差异？

Answer 1

您的 change 事件未触发，因为您有一个额外的 false 作为更改事件绑定(bind)的最后一个参数。我不知道为什么。

还要确保页面中没有任何其他脚本错误。

这应该可以正常工作。

$(document).ready(function () {

     $("#Account_AccountName").on("change", function () {
        alert($(this).val());
        var jsonData = { account: $(this).val() };
        // your get JSON call goes here

        alert("Success");
    });
});

此外，在使用 getDmUrl 变量之前定义它可能是一个好主意。我建议使用 JavaScript 命名空间，而不是简单地使用全局变量。

<script>
     var myProj = myProj || {};
     myProj.getDmUrl = '@Url.Action("GetDMList", "Project", new { area = "Masters" })';
</script>
<script src="~/Scripts/DMS/projectMasterNew.js"></script>

并在您的 projectMasterNew.js 中，使用 myProj.getDmUrl 进行 ajax 调用。