Question

I wrote this up quickly because I am having problems with it. I apologize if the code looks messy. Is tbody not clickable? There is no alert, and I don’t see any obvious errors

relevant php

echo '<table>';
while ($row = mysql_fetch_array($result)) { 

echo
'<tbody class = "reserveAPickupAppointmentRoommateAppointment"
        id = "reserveAPickupAppointmentRoommateAppointment">
    <tr>
            <td>'
                .$row["name"].
            '</td>
            <td>
                <span class = "reserveAPickupAppointmentLocaton"
                            id="reserveAPickupAppointmentLocaton">'
                    .$row["location"].
                '</span>
            </td>
            <td>
                <span class = "reserveAPickupAppointmentSubLocaton"
                            id="reserveAPickupAppointmentSubLocaton">'
                    .$row["subLocation"].
                '</span>
            </td>
        </tr>
        <tr>
            <td>
                <span class = "reserveAPickupAppointmentStartTime"
                            id="reserveAPickupAppointmentStartTime">'
                .$row["startTime"].
            '</span>    - 
            <span class = "reserveAPickupAppointmentEndTime"
                            id="reserveAPickupAppointmentEndTime">'
            .$row["endTime"].
                '</span>
            </td>
            <td>
                <span class = "reserveAPickupAppointmentDate"
                            id="reserveAPickupAppointmentDate">'
                .$row["date"].
                '</span>
            </td>
        </tr>
    </tbody>';
}

echo '</table>';

jquery included in my document ready functon

   $("#reserveAPickupAppointmentRoommateAppointment").click (function() {
    alert ("TEST");
   });

Answer 1

The fact that your ID matches your class frightens be a bit. I don’t know php, but it seems from the while that you’re creating more than one tbody in a loop.

This means that you’d have more than one element with the ID reserveAPickupAppointmentRoommateAppointment. If so it is invalid, and very likely that only the first one will be matched by the selector.

To answer your question directly, yes a tbody can have a handler` as long as you allow the event to bubble up to it.

http://jsfiddle.net/hEw54/

---

Not knowing the rest of your code, I’d guess that you want the ID on the table, and then to select all tbody elements below it.

$(document).ready(function() {
    $('#reserveAPickupAppointmentRoommateAppointment tbody').click(function() {
        alert ("TEST");
    });
});

Or you could just select directly by class:

$(function() {
    $('.reserveAPickupAppointmentRoommateAppointment').click(function() {
        alert ("TEST");
    });
});

---

I updated the code above to be placed in a jQuery DOM ready handler. You’ll notice that the two examples are slightly different. They’re essentially identical, the second being a shortcut for the first. There are other minor differences, but nothing to be concerned with here.

Also note that some people mistake the following for DOM ready code:

(function() {

    // I'm not a DOM ready construct

})();