Question

I have the following function:

$("#example tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
            $(this.nTr).removeClass('row_selected');
        });
        $(event.target.parentNode).addClass('row_selected');
    });

When a user clicks on a td element in a table it adds the row_selected class to the row. However when a user clicks on an input element inside of a td then it adds the row_selected
class to the td.

Is there a way that I can change event.target.parentNode so that instead of the parent
it adds the class to the parent tr?

Answer 1

Change your handler to use jQuery’s event delegation instead of your own…

$("#example tbody").on("click", "tr", function(event) {

…then you can just use this…

$(this).addClass('row_selected');