jQuery OnClick没有触发我的事件

Question

I have a jQuery which is like this:

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

       $("#txtAgentName").click(function (event) {

           alert("I am ready!");

       });

   });
</script>

What I am assuming that this should fire if I click on my textbox txtAgentName. But it is not happening.

This is my textbox markup:

 <asp:TextBox ID="txtAgentName" runat="server" onclick="Event();"></asp:TextBox>

However, when I am doing this on my Javascript:

function ShowTime() {
         alert('<%= DateTime.Now.ToString() %>');
       }

and calling this ShowTime from my TextBox OnClick event, then it is firing up. Dont know what I am doing wrong here :(

Answer 1

1. In ASP.NET setting the ID doesn't mean the DOM element will represent the same ID
2. You have an onclick event handler, try removing that.

Instead I would add a class onto it and do something like

<asp:TextBox ID="txtAgentName" runat="server" CssClass="my-text-box"></asp:TextBox>

$(function() {
    $('.my-text-box').click(function() {
        alert('Clicked!');
    });
});

The ID property of a control in ASP.NET WebForms is what will get used when building the control tree. If you look at the actualy ID in the DOM it probably says something like MainContent_txtAgentName instead.

You might want also to take a look at setting the ClientIDMode http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

If you're using ASP.NET 4.0 you can use <asp:TextBox ID="txtAgentName" runat="server" ClientIDMode="Static" ></asp:TextBox> this will render verbatim what you have in the ID attribute as the actual ID on the DOM.

Answer 2

When that web control renders, it is given an auto generated id. Which means the jquery selector never finds it. In addition to what has already been mentioned, you can use

$("#<%= txtAgentName.ClientId %>").click(function (event) {

Or change the control to have the following attribute

ClientIDMode="Static"

which will tell it to render txtAgentName as the id.

Answer 3

It is because .Net is probably renaming your textbox. Look at your generated code in the browser at what the textbox is getting renamed to. It'll be a mess. If you are using ASP.NET4, you can add ClientIdMode="Static" to the control, and it will remain named as you desire. Otherwise, your best bet is to give the textbox a class, and use that as the selector.

One other thing you could do is use <%= txtAgentName.ClientId %> to get the Client id. But if your jQuery is not on that page, then that will not work.

Answer 4

Try this:

 <asp:TextBox CssClass="myAgent" ID="txtAgentName" runat="server"></asp:TextBox>


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

   $(".myAgent").click(function (event) {

       alert("I am ready!");

   });

});
</script>