Question

I have a gridview that fill it with some data.

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
</asp:GridView>

code:

    if (!IsPostBack)
    {
        using (DataClassesDataContext dc = new DataClassesDataContext())
        {
            GridView1.DataSource = dc.Regions.ToList();
            GridView1.DataBind();
        }
    }

I want when I clicked on TH section an alert showed.I wrote this code:

   <script type="text/javascript">
    $('#GridView1 th').on("click", function () {
        alert("nima");
     });   
</script>

but it doesc not work.where is my mistake?

thanks

---

Edit 1)
I Edit main question and add ' for selector.I forgot to type that.
the problem is when I write this code it works.I want to know on does not work:

$('body').live('click','#GridView1 th', function () {
        alert("hello");
    });  

Answer 1

are you sure you’re writting $(#GridView1 th)? should be at least $('#GridView1 th')… and check the View Source to see if the correct ID as if it’s nested in other ASP.NET control will never be GridView1…

to be safe in any ASP.NET control you should use the ClientID property, so you can always write:

<script type="text/javascript">
    var grid = '<%= GridView1.ClientID %>';
    $("#" + grid + " th").on("click", function () {
        alert("hello");
     });   
</script>

And verify in your source code if you actually have a Table Header <th> as I know It was optional in the GridView earlier days…

From your code, you just forgot that the script will run as soon is it on the page and mostly when the table code is not even there…

change this:

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#GridView1 th').on('click', function () {
        alert("nima");
    });  
</script>

into this

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $('#GridView1 th').on('click', function () {
          alert("nima");
       });  
    });
</script>

or simply append your script code at the end of the page, so when the browser reach that line, all the others are already rendered and available to the DOM.

Here is a Live Example of your code: http://jsbin.com/etamug/edit#javascript,html simply click the Render button to see everything up and running…

I have used $(function() {}); as a shortcut, but the original method is the one I have specified in this answer.

You can find more information regarding $(document).ready() in jQuery website