javascript - jquery 代码无法在 aspx 中运行

Question

我试图有一个文本框，当用户在文本框中键入内容时，下面的标签会使用 jquery 读取剩余的字符数。

当我在常规 html 页面中尝试下面的 jquery 代码时，它按预期工作。但是当我尝试在我的 aspx 页面中执行此操作时，它不会更新标签。

我是 jquery 的初学者，所以我不确定我是否在这里遗漏了一些东西..有人可以指导我正确的方向吗..

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageToolkitScriptManager.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="DotNet_test" %>

<%@ Register TagPrefix="uc" TagName="WebUserControl" 
    Src="~/Controls/WebUserControl.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHead" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderBody" Runat="Server">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function () {

        $('<%= inp1.ClientID %>').keyup(function () {
            var x = $('<%= inp1.ClientID %>').val().length;
            //alert(x);
            var y = 10;
            $('<%= p1.ClientID %>').text("Len balance : " + (y - x));

            if ((y - x) < 0) {
                $('<%= p1.ClientID %>').html("too much");
                $('<%= inp1.ClientID %>').val($('<%= inp1.ClientID %>').val().substring(0, 10));
            }

        });

    });
 </script>

    <asp:TextBox ID="inp1" runat="server"></asp:TextBox>

    <asp:Label ID="p1" runat="server" Text=""></asp:Label>

<%--<input id="inp1">
<button id="b1">Click</button>
<p id="p1"></p>--%>


    </asp:Content>

Answer 1

考虑一个普通的基于 jQuery ID 的选择器:

$("#myElementID");

现在，看看您的选择器:

$('<%= inp1.ClientID %>')

您丢失了#，它告诉 jQuery 您正在寻找ID，而不是节点类型。因此，您的选择器找不到任何内容。

更改选择器以包含 #，如下所示:

$('#<%= inp1.ClientID %>')

你应该已经准备好了!

<小时/>

替代答案:

看看这个文本框:

<asp:Textbox runat="server" id="MyTextbox" ClientIDMode="static"></asp:Textbox>

请注意我如何添加 ClientIDMode="static"。这告诉 ASP 呈现控件而不改变 ID。这意味着您可以简单地在 jQuery 中使用选择器 $("#MyTextbox")，它就会找到文本框。

注意:不要在重复容器(例如 GridView 或 Repeaters)内的元素上使用此选项。由于 ID 必须是唯一的，因此如果您要拥有此文本框的重复项，则需要使用不同的 ID。在这种情况下，请考虑使用 ClientIDMode="predictable"，它将索引附加到您的 ID，例如 MyTextbox1、MyTextbox2 等。