jQuery event delegation (event optimization)

by joplomacedo

HTML

<table>
                                <thead>
                                    <tr>
                                        <th class="timeTableColTh timeTableCol">
                                            <span class="thFilterListBtn">Time<i class="typicn next"></i></span>
                                            <ul class="thFilterList">
                                                <li>Today</li>
                                                <li>Week</li>
                                                <li>Month</li>
                                            </ul>
                                        </th>
                                        <th class="durationTableColTh durationTableCol"><span>Duration</span></th>
                                        <th class="statusTableColTh statusTableCol">
                                            <span class="thFilterListBtn">S<i class="typicn next"></i></span>
                                            <ul class="thFilterList">
                                                <li>All</li>
                                                <li>Received</li>
                                                <li>Busy</li>
                                                <li>Offiline</li>
                                            </ul>
                                        </th>
                                        <th class="typeTableColTh typeTableCol">
                                            <span class="thFilterListBtn">Type<i class="typicn next"></i></span>
                                            <ul class="thFilterList">
                                                <li>All</li>
                                                <li>Info</li>
                                                <li>Complain</li>
                                                <li>Other</li>
                                            </ul>
                                        </th>
                 ...

CSS

p {
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    background: black;
    color:#fff;
}

JavaScript

var p = $('p');


/**/
$('table').on('click', 'tr', function() {
    p.text($(this).attr('id'));
});