CODEWITHSUNDEEP
javascriptjqueryhtmljquery-click-event
Denys Wessels
Denys Wessels

Reputation: 17049

Raise jQuery click event on every td in tbody

I'm trying to raise a click event whenever a user clicks on any td element inside the tbody.This is what I have so far but it's not raising the event, any ideas why?

<head runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#skuOptionsBody td").click(function () {
            alert('clicked!');
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="options" border="1">
        <thead>
            <tr>
                <td>
                    SWEET OPTION
                </td>
                <td>
                    DRINK OPTION
                </td>
            </tr>
        </thead>
        <tbody id="skuOptionsBody">
            <tr>
                <td style="text-align: center">
                    SO1
                </td>
                <td style="text-align: center">
                    DO1
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</body>

UPDATE:

Sorry I forgot to mention that I dynamically add rows to the table using jQuery and as I'm adding new rows I need them to be bound to this click event.How can this be done?

Upvotes: 1

Views: 12774

Answers (6)

Abhidev
Abhidev

Reputation: 7273

try this inside $(document).ready(function(){});

$("#skuOptionsBody td").bind('click', function () {
    alert('clicked!');
});

OR for jquery > 1.7 you can make use of .on()

$("#skuOptionsBody").on('click', 'td', function () {
    alert('clicked!');
});

Upvotes: 5

Adil
Adil

Reputation: 148150

The script for binding executes before elements added to dom, Also use the latest jQuery if possible.

  • You can put script in document.ready 

     $(document).ready(function(){
       $("#skuOptionsBody td").click(function () {
          alert('clicked!');
       });
 });

  • Use delegated events using on

       $(document).on("click","#skuOptionsBody td", function () {
      alert('clicked!');
   });

  • Put the script after html elements added to DOM, could be just before ending body tag.

      <body>
    <form id="form1" runat="server">
        <table id="options" border="1">
            <thead>
                <tr>
                    <td>
                        SWEET OPTION
                    </td>
                    <td>
                        DRINK OPTION
                    </td>
                </tr>
            </thead>
            <tbody id="skuOptionsBody">
                <tr>
                    <td style="text-align: center">
                        SO1
                    </td>
                    <td style="text-align: center">
                        DO1
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <script type="text/javascript">
        $("#skuOptionsBody td").click(function () {
        alert('clicked!');
        });
    </script>
</body>

Upvotes: 1

Satpal
Satpal

Reputation: 133433

Warp your code in document-ready handler because when the code runs it won't find the "skuOptionsBody td" element in the page: the browser will not have parsed that yet.

Code

$(document).ready(function () {
    $("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });
});

OR

Move your <script> tag to the end of the <body>.

OR

Use Event Delegation

Code

$(document).delegate('click', "#skuOptionsBody td", function () {
    alert('clicked!');
});

Upvotes: 1

OutOfSpaceHoneyBadger
OutOfSpaceHoneyBadger

Reputation: 1048

I tried your code in jsfiddle and everything seems to be working fine, just put it to some top event, like $(document).ready() function. Heres a link http://jsfiddle.net/lithium182/A5vMj/

jquery: 

$("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });

You want to trigger click on a thead cell?

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

There is nothing wrong in your code. It is just that you have not added it at correct place. write the code on document ready:

$(document).ready(function(){
$("#skuOptionsBody td").click(function () {
        alert('clicked!');
    });
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

Your code must be in a dom ready handler because you are trying to add the event handlers before the target elements are loaded in the dom

jQuery(function(){
        $("#skuOptionsBody td").click(function () {
            alert('clicked!');
        });
})

Upvotes: 1

Related Questions