Why my jquery script doesn't work in my webform which was inherited from MasterPage?

asp.net, javascript, jquery, master-pages

Solution

Because the ID changes at run-time. You should use `ClientId` for your controls.

You can also use `ClientIDMode="Static"` to stop the id form changing to it's original. More Detail about client id mode

$("#<%= Control.ClientID %>").addClass("display");

  $("#<%=t2.ClientID %>").change(function () {
                if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
                   $("#lblerror%>").addClass("display");
                }
               else {
                   $("#lblerror").removeClass("display");
                }
            });

Edit 1

<input id="t1" type="password" placeholder="Password" class="login-input-class1"
        runat="server" />
<input id="t2" type="text" placeholder="ConfirmPassword" class="login-input-class1"
        runat="server" />

And jQuery

 $(document).ready(function () {
        $("#<%=t2.ClientID %>").change(function () {
            if ($("#<%=t1.ClientID %>").val() === $("#<%=t2.ClientID %>").val()) {
                $("#lblerror%>").addClass("display");
            }
            else {
                $("#lblerror").removeClass("display");
            }
        });
    });

Problem

I have a master page and in its head, i have : ``` <script src="Script/jquery.min.js"></script> <link href="Stylesheet/Master.css" rel="stylesheet" /> ``` and i have a webform (by name=Login.aspx) which was inherited from my master page, in Login.aspx i have : ``` <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <input id="t1" type="password" placeholder="Passwords" class="login-input-class1" runat="server" ClientID="Static" /> <input id="t2" type="text" placeholder="ConfirmPasswords" class="login-input-class1" runat="server" ClientID="Static"/> <label class="display" id="lblerror">Error</label> <script> $(document).ready(function () { $("#t2").change(function () { if ($("#t1").val() === $("#t2").val()) { $("#lblerror").addClass("display"); } else { $("#lblerror").removeClass("display"); } }); }); </script> </asp:Content> ``` and in Master.css i have : ``` .display { display:none; ``` } But my script does not work, what is the problem?

Original source