jquery更改功能在Modal PopUp asp.net mvc上不起作用

Question

下拉更改事件功能在 Bootstrap 模式下不起作用。

我的模态弹出窗口

<div class="modal fade" id="UpdateModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="UpdateModelPopup">Add Menu</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div>
                    @using (Html.BeginForm())
                    {
                        @Html.AntiForgeryToken()

                        <div class="form-horizontal">
                            <h4>UserMenu</h4>
                            <hr />
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.MenuNumber, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MenuNumber, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuCode, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.MenuCode, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MenuCode, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuProject, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.DropDownListFor(model => model.MenuCode, new SelectList(ViewBag.menuProject_list), "--- Select Menu Project ---", new { @id="cbxMenuProject", @class = "form-control select" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuLevel, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.MenuLevel, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MenuLevel, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuName, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.DropDownListFor(model => model.MenuName, new SelectList(" "), "--Select Menu Name--", new { @id="cbxMenuName", @class = "form-control" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuURL, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.MenuURL, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MenuURL, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.MenuToolTip, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.MenuToolTip, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.MenuToolTip, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Create" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnUpdateMenu" onclick="return AddMenu();">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的 JS

<script type="text/javascript">
    function LoadAddMenu() {
        $("#UpdateModelPopup").modal('show');
    };


    $("#cbxMenuProject").on('change', function () {
        alert('dasda');
    })

    $("#cbxMenuProject").change(function () {
        alert('dasda');
    })

    function AddMenu() {
        alert('dasda');
    }
</script>

当我更改下拉菜单时，javascript 的更改功能不起作用，不知道为什么。

在它在另一个页面上工作之前并且工作正常，但是在将代码移动到模式弹出窗口之后，它停止工作。

我正在使用 bootstrap 4 和 Asp.Net MVC 项目

Answer 1

使用了两次 Id - cbxMenuProject，请只使用一次 id，Id 对于所有属性应该是唯一的。

如果你想为多个元素提供相同的标识符，你可以使用 class 而不是 Id。

检查控制台是否有任何错误。 如果是并且它与 $ 相关的未定义 然后在渲染你的脚本之前添加 jquery.js 引用。 使用 Jquery 时最常见的问题

在 document.ready 中添加你的脚本函数

$( document ).ready(function() {
     $(".cbxMenuProject").on('change', function () {
    alert('dasda');
  })

  $(".cbxMenuProject").change(function () {
    alert('dasda');
  })
});

OR $(函数)...

$(function() {
    $(".cbxMenuProject").on('change', function () {
        alert('dasda');
      })

      $(".cbxMenuProject").change(function () {
        alert('dasda');
      })
});

在这里，我将选择器“#”更改为“。”为了考虑将 id 更改为类，因为它是重复的，您必须更改模态元素。