jquery - Prevent Javascript event when clicking on a button -

i have problem mixing associating 2 javascript functions.

i have table sortable tablesorter jquery plugin. inside table header, have button "refresh" update content table in ajax.

the problem click event seems prevented sort event, , don't know how fix that.

edit: table no sorted when updating table

here table layout:

<table class="container-content" align="center" id="tableuserbyappli">   <thead>     <tr class="container-title">       <th>         <button id="btnappli">           <img width="16" alt="reload" src="img/refresh-icon.png">         </button>         application       </th>       <th>         users       </th>     </tr>   </thead> </table> 

and js code:

$(function() {     $("#btnappli").click(function()     {         ajaxupdateusersbyappli;     });      // dynamically set table sortable (tablesorter)     $("table").addclass("tablesorter");     $("table").tablesorter({         sortreset : true     });  }); 

a jsfiddle run problem: http://jsfiddle.net/33rrd/

there 2 issues need addressed in shared demo (updated demo).

first, ignore button clicks, wrap header titles in div, target them using selectorsort option

html

<th>     <button id="btnappli">       update     </button>     <div class="title">application</div> </th> 

css (to reposition button)

th button {     float: left; } 

script

$("table").tablesorter({     sortreset : true,     selectorsort: '.title' }); 

second, table headers rebuilt within plugin, event binding need delegated:

$("table").on("click", "#btnappli", function(){     alert("test");     //ajaxupdateusersbyappli; });