How to add jQuery .on click to Tablesorter th?
I have table.tablesorter element that change frequently using AJAX. I want to add event handler on 'click' that will delegate to table.tablesorter th.class element whenever I click its header. I'm new in use jQuery on. So, I try to put following jQuery script into Chrome Web Console.
jQuery script:
$('#table-content').on(
'click',
'.tablesorter thead tr th',
function() {alert(); }
);
My HTML:
<div id="table-content">
<table class="tablesorter">
<thead>
<tr>
<th class="header">No.</th>
<th class="header">Name</th>
<th class="header">Phone</th>
</tr>
</thead>
</table>
</div>
Result: there is no alert pop up window when I click header on the table.
What must I change to show alert dialog when I click the table's header?
Answer
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$( document ).ready(function() {
$("table.tablesorter tr th.header" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
</head>
<body>
<div id="table-content">
<table class="tablesorter">
<thead>
<tr>
<th class="header">No.</th>
<th class="header">Name</th>
<th class="header">Phone</th>
</tr>
</thead>
</table>
</div>