jQuery 显示元素未按预期在 MVC 中工作

Question

我在 MVC 的 Layout 主视图上添加了 jQuery 版本 3.4.1，我还有另一个名为 Register 的视图，其中包含以下简单的 javascript代码：

<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $('#btnRegister').click(function () {
            $('#successModal').modal('show');
        })
    });
</script>

但是点击 btnRegister 并没有在浏览器中触发。

这是由于某些原因 Layout 视图造成的。为了测试这种情况，当我从 Register 视图中排除 Layout 视图并将 jQuery v3.4.1 添加到 Register 视图时，此代码开始运行正如预期的那样。

我已经非常确定 Layout 和 Register 视图都没有使用其他 javaScript 库，除了给定的 2 个库（jQuery v3.4.1 & bootstrap.min.js).对于那些想在浏览器中查看拉伸标记的用户，我已将页面源代码粘贴到此处 (https://pastebin.com/U3n3XCbh)。

Answer 1

尝试在正文点击上注册点击事件，并根据按钮 ID 过滤点击事件。

$(document).ready(function () {
    $('body').on('click', '#btnRegister', function () {
        $('#successModal').modal('show');
    })
});

Answer 2

根据您提供的标记，有两个元素带有 btnRegister ID。

<li id="registerLi">
    <a href="/Account/Login" id="btnRegister">
        <img src="/ximages/key.png" alt="register.png" />
        <span>Login / Register</span>
    </a>
</li>

和

<input id="btnRegister" class="btn btn-success" type="button" value="Register" />

只有 1 个元素将绑定到您注册的单击事件处理程序，即 a 元素。

是您的问题的 fix/workaround，但您应该在页面中具有唯一的元素 ID。

jQuery 显示元素未按预期在 MVC 中工作

jQuery showing element not working as expected in MVC

jquery

asp.net-mvc-4