Raise jQuery click event on every td in tbody

Denys Wessels picture Denys Wessels · Feb 11, 2014 · Viewed 11k times · Source

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?

Answer

Abhidev picture Abhidev · Feb 11, 2014

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!');
});