.click() 不起作用。 jQuery

Question

在我的login.aspx 中，我尝试通过单击按钮执行简单的客户端验证（检查用户名和密码字段是否为空）。但是 jquery 中的 .click() 没有触发。我哪里错了。

注意：我有一个事件 LoginButton_Click 其背后的代码具有一些功能。

<script src="Scripts/Login.js" type="text/javascript"></script>

 <td align="right" colspan="2">
     <asp:Button ID="LoginButton" runat="server"  Text="Log In" 
       onclick="LoginButton_Click" class ="validateForm" />
</td>

我的login.js 文件：

$(function () {

  $('#LoginButton').click(function () {

            var username = $('#txtUserName');
            var pwd = $('#txtPassword');
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

提前感谢

BB

Answer 1

$("#<%= LoginButton.ClientID %>") 不适用于外部 JavaScript 文件。如果要使用外部文件，请在 aspx 文件中创建一个全局变量并在 JavaScript 文件中访问它。

---

编辑：

在aspx文件中创建全局变量。

var loginButtonId = <%= LoginButton.ClientID %>;

在 JavaScript 文件中使用它

$("#" + loginButtonId ).click(function () {...});

注意： 变量应在添加引用之前声明到 JavaScript 文件。

Answer 2

这不会给你带来任何问题，使用 jquery 选择器，我们通过以 LoginButton 结尾的 id 属性来选择它。

$(function () {
  $("input[id$=LoginButton]").click(function () {

            var username = $("input[id$=txtUserName]");
            var pwd = $("input[id$=txtPassword]");
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

Answer 3

因为在您的 .js 文件中，javascript 无法读取以下值：$("#<%= LoginButton.ClientID %>")
您需要：
- 将此代码放在 html 页面的末尾。
或
- 在js文件中放置一个固定的选择器

Answer 4

我想你想要onclientclick。

http://msdn.microsoft.com /en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx

以防万一有人关心...

<script src="Scripts/Login.js" type="text/javascript"></script>

 <td align="right" colspan="2">
     <asp:Button ID="LoginButton" runat="server"  Text="Log In" 
       onclick="LoginButton_Click" onclientclick="validateLogin()" class ="validateForm" />
</td>

login.js 文件：

function validateLogin() {

            var username = $('#txtUserName');
            var pwd = $('#txtPassword');
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

            return true;
}

Answer 5

#LoginButton 不存在。当 asp 按钮被呈现时，它将被呈现为与包含它的 ASP 控件相关的专用 ID，例如 ctrl00_mycontrol_panelid_LoginButton。为了将其引入外部文件，您需要做的是使用全局变量：

var loginButtonID;
var txtUserNameID;
var txtPasswordID;

$(function () {

  $(loginButtonID).click(function () {

            var username = $(txtUserNameID);
            var pwd = $(txtPasswordID);
            if (username.val().length <= 0) {
                alert("User Name is required.");
                return false;
            }
            if (pwd.val().length <= 0) {
                alert("Password is required.");
                return false;
            }

        });
});

然后在包含此 login.js 文件的文件中，您需要通过调用来设置这些变量：

<script type="text/javascript">

loginButtonID = '<%=LoginButton.ClientID%>';
txtUserNameID = '<%=txtUserName.ClientID%>';
txtPasswordID = '<%=txtPassword.ClientID%>';

</script>

确保不要使用 new " 重新声明这些变量var”修饰符。这可能会破坏范围并搞砸你的脚本。