jquery 单击事件在用户控件中不起作用

Question

我在用户控件中有一个按钮和一些 jquery javascript，点击回调不会调用。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Login.ascx.cs" Inherits="TestApp2.Views.Login" %>
<script type="text/javascript">
    $(function () {
        $("#createBtn").click(function () {
            alert("message");
        });
    });

</script>
<asp:UpdatePanel ID="LoginMainUpdatePanel" runat="server" UpdateMode="Conditional" OnUnload="UpdatePanel_Unload">
    <ContentTemplate>
        <asp:TextBox ID="infoTB" runat="server" TextMode="MultiLine" />            
        <div>
            <div class="left-align" style="background-color:blue">
                <button id="createBtn" class="btn btn-default">Create</button></br>
                <button id="signinBtn" class="btn btn-default">Sign In</button>
            </div>
            <!-- Login View -->
            <div id="loginView" runat="server" class="centre-form centering text-center" style="background-color:green">
                <h1>Login</h1>
                <asp:Label ID="info" runat="server" Text="" />
                    
                <div class="form-group">
                    <label for="userIn">Username</label>
                    <asp:TextBox runat="server" id="userIn" CssClass="form-control" TextMode="SingleLine" />
                    <asp:RequiredFieldValidator runat="server" id="reqUser" controltovalidate="userIn" errormessage="Enter Username" />
                </div>
                <div class="form-group">
                    <label for="passwordIn">Password</label>
                    <asp:TextBox runat="server" id="passwordIn" CssClass="form-control" Text="Enter Password" TextMode="Password" />
                    <asp:RequiredFieldValidator runat="server" id="reqPass" controltovalidate="passwordIn" errormessage="Enter Password" />
                </div>
                <asp:Button runat="server" id="loginBtn" CssClass="btn btn-default" onclick="loginBtn_Click" text="Login" />
            </div>

            <!-- Create Account View -->
            <div id="createView" runat="server">

            </div> 

        </div>
    </ContentTemplate>
</asp:UpdatePanel>

在用户控件中使用 JavaScript 有何不同？此用户控件使用更新面板动态加载到主页中。

此外，每当我按下按钮时，都会出现验证字段警告。

Answer 1

动态id的可能情况

尝试使用

 $(function () {
        $('#<%= createBtn.ClientID %>').click(function () {
            alert("message");
        });
    });

或者简单地使用 ClientIdMode="Static" 作为您的按钮。

Answer 2

我敢打赌您的更新面板会在某些事件后重新加载。每次 UpdatePanel 重新加载后，您需要将事件附加到新的 UpdatePanel 内容。您可以在 pageLoad js 函数中执行此操作：

function pageLoad(sender, args) {
   $("#createBtn").click(function () {
      alert("message");
   });
}

Answer 3

我认为问题在于您的用户控件是动态加载的，因此您需要委托该事件。所以试试这个。

$(document).ready(function(){
   $("body").delegate("#createBtn",'click', function () {
     alert("message");
   });
});

Answer 4

我发现将 javascript 放在一个 js 文件中并将其导入到主页中是可行的。

我还在该文件中使用了 pageLoad 函数解决方案。

jquery 单击事件在用户控件中不起作用

jquery click event not working in a usercontrol

javascript

c#

jquery

user-controls