<table class="table lsttabl">
    <thead>
    <tr>
        <th><div id="NameLabel">Customer Name</div></th>
        <th>Email</th>
        <th>Registered</th>
        <th id="Date1Label">Created Date</th>
        <th id="Date2Label">Last Updated Date</th>
        <th id="Date3Label">Expiry Date</th>
        <th id="UserCountLabel">User Count</th>
        <th>Active</th>
        <th>Configure</th>
        <th>Edit</th>
    </tr>
    </thead>

    <tbody> 
    </tbody>
</table> 

And I am trying to Bind Event using the code below

$("#NameLabel").click(function () { alert("hello"); });

I tried many variations but it is not working.. Please Share your knowledge.

<table class="table lsttabl">
    <thead>
    <tr>
        <th><div id="NameLabel">Customer Name</div></th>
        <th>Email</th>
        <th>Registered</th>
        <th id="Date1Label">Created Date</th>
        <th id="Date2Label">Last Updated Date</th>
        <th id="Date3Label">Expiry Date</th>
        <th id="UserCountLabel">User Count</th>
        <th>Active</th>
        <th>Configure</th>
        <th>Edit</th>
    </tr>
    </thead>

    <tbody> 
    </tbody>
</table> 

And I am trying to Bind Event using the code below

$("#NameLabel").click(function () { alert("hello"); });

I tried many variations but it is not working.. Please Share your knowledge.

• javascript
• jquery
• asp-mvc

• The problem is outside the code we see. There could be many reasons, from a generated html, a css preventing the click, your code not inside document ready, etc. – Denys Séguret Commented Dec 7, 2012 at 12:14

6 Answers 6

IF this code is dynamically added after the page loads, you might need to use the delegate function.

$('body').delegate('click','#NameLabel',function(){
  alert("hello");
});

Here I am using the body selector as I can be sure that the body element was there when the page was loaded. If there is another parent element that you are loading the dynamic content into, you can use it instead of attaching the event to the body.

You need to bind it in document.ready to make sure that element is available before access by the script.

Live Demo

$(document).ready(function(){

   $("#NameLabel").click(function () {
          alert("hello");
   });

});

Try the following:

$(document).ready(function(){
    $('table.lsttabl thead th div[id$=NameLabel]').click(function(){
    alert("hii");
    });
});

Try:

$(document).ready(function(){
    $('table').on('click', 'th', function(){
        console.log(event.target);
    });
});

if you want it specifically for #NameLabel, Then change the on selector to '#NameLabel'

<script type="text/javascript">
    $(document).ready(function () {
        $('#NameLabel').click(function () {
            alert("Customer Name Clicked");
        });
    });
</script>
<table class="table lsttabl">
    <thead>
    <tr>
        <th><div id="NameLabel">Customer Name</div></th>
        <th>Email</th>
        <th>Registered</th>
        <th id="Date1Label">Created Date</th>
        <th id="Date2Label">Last Updated Date</th>
        <th id="Date3Label">Expiry Date</th>
        <th id="UserCountLabel">User Count</th>
        <th>Active</th>
        <th>Configure</th>
        <th>Edit</th>
    </tr>
    </thead>

    <tbody> 
    </tbody>
</table> 

Don't forget to import JQuery Libraries.

you could use this

here's a working jsfiddle http://jsfiddle/9PNk6/

$("#NameLabel").on('click',function () {
   alert("hello");
});