使用JQuery在文本框上触发OnClick

本文关键字：OnClick JQuery 文本 使用 | 更新日期: 2023-09-27 17:51:23

我有一个文本框，在其中任何时候用户点击它在后面的代码函数需要得到解雇。下面是JQuery:

    <script type="text/javascript">
      $("#txtName").click(function(){<%TextChanged();%>});
    </script>

这里是文本框UI:

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

这里是TextChanged()函数背后的代码，我正在运行一些查询:

protected void TextChanged()
    {
        //Writing my query here!!!
    }

现在这个函数在Page_Load()中启动，而不是在txtName.Click中。为什么?我想从JQ触发这个TextChanged()函数每当用户点击txtName!

使用JQuery在文本框上触发OnClick

你不久前问了一个非常类似的问题。问题是，如果没有一些相当粗糙的陪审团操纵，这将不会很好地发挥作用。每次文本框中的文本发生变化时运行服务器端代码将提供糟糕的用户体验，因为每次文本发生变化时页面都会回发。所以每次用户点击一个键，砰，页面消失，重新出现，然后如果你没有设置焦点，他们必须再次找到文本框。

你真的需要通过JavaScript/jQuery处理你在客户端所做的任何事情。你的最终目标是什么?当文本被更改时，您希望发生什么?

如果您想在客户端处理click事件，您应该在JQuery函数不在服务器端

首先，它并不是那样工作的——如果不进行回发或使用AJAX，就不能从前端触发服务器事件。其次，. net将它自己的服务器生成的ID分配给WebForms元素，因此您根本没有选择txtName元素。尝试使用CssClass属性并使用$(".myElement").click(function() { });

之类的内容

如果希望能够使用前端实例化的事件异步触发服务器事件，最好的选择是使用AJAX调用。

我不是asp专家，但这类服务的工作原理类似。当获得对页面的请求时，服务器处理它并从您的asp文件构造结果html。这个html由浏览器处理。因此，当您将<%TextChanged();%>放在asp文件中时，服务器执行并发送相应的结果。实际上你的jquery脚本在浏览器上是这样的

$("#txtName").click(function(){});

对于这个工作，你需要发送一个新的请求到服务器上执行你的TextChanged方法，并返回一个有效的响应(例如xml)，所以浏览器或在这种情况下你的jquery脚本可以处理它，并显示你想要的信息

服务器端代码<%TextChanged();%>在页面第一次被拉出时执行。onclick函数在客户端触发，而不能在服务器端执行任何操作。你需要以某种方式使用回发。通过jQuery或ASP使用AJAX。. NET的AJAX使用页面方法，web服务等

这里有一个简短的演示来解释发生了什么。创建一个aspx页面，并在其中包含以下内容

<html>
    <body>
        <script language="javascript">
        function ShowTime()
        {
            alert('<%= DateTime.Now.ToString() %>');
        }
        </script>
        <form runat="server">
            <asp:TextBox runat="server" onclick="ShowTime();" Text="Click Me"></asp:TextBox>
        </form>
    </body>
</html>

然后在浏览器中拉它并单击文本框几次。您应该每次都看到相同的警报。检查呈现的HTML(查看源代码)

<html>
    <body>
        <script language="javascript">
        function ShowTime()
        {
            alert('4/20/2011 12:06:09 PM');
        }
        </script>
        <form method="post" action="Test1.aspx" id="ctl00">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJLTU2Mzk2MTc5ZGTwB2Ph3lGOb1/uUI+lbZ5QtQQT2kk+dPbtprtjMpSZBg==" />
</div>
<div class="aspNetHidden">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK946tbAqLAiY0L0tc9fkAJ/FKqRuxYl8nrpx8irMZ96Kzc8GjJhrrhP9A=" />
</div>
            <input name="ctl01" type="text" value="Click Me" onclick="ShowTime();" />
        </form>
    </body>
</html>

正如您所看到的，服务器端代码DateTime.Now.ToString()已经执行，并且它已经将执行时刻的时间发送给客户端浏览器。现在，无论客户端函数执行多少次，由于客户端和服务器之间没有通信，同一时间都会发出警报。

为什么不使用AutoPostBack功能呢?

<asp:TextBox ID="txtName" 
             runat="server" 
             AutoPostBack="true" 
             OnTextChanged="TextChanged" />
相关文章：