我正在尝试使用 jquery 制作一个简单的控件，如果用户名和密码不为空，则应在单击时显示警报。
实际上我已经尝试了以下 jquery 代码，但它没有效果，控制台没有任何响应，什么也没有。
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if (!$('#username').val() && !$('#password').val()) {
alert("VAI!");
}
});
</script>编辑: 这是页面的完整代码，在代码隐藏中没有任何内容，似乎 JavaScript 在执行函数 click 时就死掉了。
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="auth.aspx.vb" Inherits="servizigab.auth" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico" />
<title>Gab Servizi: Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link href="/assets/css/bootstrap.min.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/modalstyle.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/login.css" type="text/css" runat="server" rel="stylesheet" />
</head>
<body class="text-center fade-in">
<form class="form-signin" runat="server">
<img class="mb-2" draggable="false" src="assets/img/gabservizi.png" alt="" width="160" height="160" />
<h1 class="h3 mb-3 font-weight-normal" translate="yes">Accedi a Gab Servizi!</h1>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login"/>
<p class="text-muted mt-2 mb-3">Non hai un profilo? <a href="#" class="text-primary">Richiedilo!</a></p>
<div class="myAlert-bottom alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Password o nome utente errati!</strong> Riprovare!
</div>
<iframe id="log" class="d-none"/>
</form>
<!-- librerie js -->
<script src="/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
</body>
</html>
最佳答案
问题1你的逻辑是倒退的
!意思是不是。
因此，您正在测试它们是否都是 空(即没有用户名值，也没有密码值)，而不是它们都有值。
删除! s。
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>问题 2:您的 HTML 无效
使用a validator 。它会告诉你，你的<iframe>缺少结束标记。这会将其后面的所有内容(包括脚本)放在 iframe 内，因此对于不支持 iframe 的浏览器，脚本将被视为替代内容并且不会被执行。
关于javascript - JQuery 单击时没有任何操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54442949/