jQuery on binding when loading partial -

i'm loading partial shown here:

<div id="catering-dialog" title="catering new booking">  <div id="itemstable">    @{html.renderaction("addcateringitem", new { model.booking.bookingid });}  </div> </div> 

and have jquery .on()

$('a.editrow').on("click", function () {    alert("clicked"); }); 

basically, partial table , each row has cell "edit" in , when clicked should display alert "clicked" nothing @ happens.

any ideas?

to update:

<div id="cateringtable"> <table border="2" bgcolor="#ffffff" id="cateringlisttable"> <thead>     <tr>         <th>time:</th>         <th>description:</th>         <th>quantity:</th>         <th>cost £:</th>     </tr>  </thead>     <tbody>         @foreach (var item in model)         {             html.renderpartial("_cateringitemeditor", item);         } </tbody> </table> </div>  

this code renderaction rendering , each row partial rendered, code follows:

<tr>             <td>@html.hiddenfor(model => model.starttime)             <label class="cateringlabel">@model.starttime</label></td>          <td>@html.hiddenfor(model => model.description)             <label class="cateringlabel">@html.displayfor(model => model.description)</label>         </td>          <td>@html.hiddenfor(model => model.quantity)             <label class="cateringlabel">@html.displayfor(model => model.quantity)</label>         </td>          <td>@html.hiddenfor(model => model.charge)             <label class="cateringlabel">@html.displayfor(model => model.charge)</label>         </td>           <td>@html.hiddenfor(model => model.cateringid)</td>          <td>             <a href="#" class="editrow">edit</a>             <a href="#" class="deleterow">delete</a>         </td>   </tr> 

use event delegation fr dynamic elements

$("#itemstable").on("click","a.editrow" function () {  alert("clicked"); }); 

event delegation allows attach single event listener, parent element, fire children matching selector, whether children exist or added in future.