javascript - Make a delegated jQuery Auto-complete -

i using following code create auto-complete textbox. jquery follows.

$(function() {    $( "#items .slno" ).autocomplete({       source: 'search.php'    }); });  

the html follows.

<table id="items">      <tr class="item-row">             <td class="item-name"><div class="delete-wpr"><a class="delete" href="javascript:;" title="remove row">-</a></div></td>             <td><input type="text" id="slslno" class="slno"/></td>             <td><input type="text" class="cost"/></td>             <td><input type="text" class="qty"/></td>             <!--  <td><span class="price"></span></td>-->             <td class="price"></td>             <a class="add" id="addrow" href="javascript:;" title="add row">+</a> </tr>  </table> 

the auto-complete works first row. however, when second row created clicking on "add row" button in above code (its working fine), auto_complete isn't working on subsequent rows. sorted out need delegated handler that. how can convert current jquery selector delegated one?

i kinda wrote following based on answer, it's still not working.

   $('#items').delegate('#items .slno','keyup', function () {       $(this).autocomplete({          source: 'search.php'     });    }); 

then went on use following.

  $(function(){   $('#items').on('.slno','keyup.autocomplete', function(){     $(this).autocomplete({       source : 'search.php'     });   }); }); 

and failed. how achieve this?

update

in above example, ordering of event messed up. needed touse proper syntax

$(selector).on(event,childselector,data,function,map) 

which makes code following.

  $(function(){   $('#items').on('keyup.autocomplete','.slno', function(){     $(this).autocomplete({       source : 'search.php'     });   }); }); 

and did task !!!

the code below worked me charm.

$(function(){       $('#items').on('keyup.autocomplete','.slno', function(){         $(this).autocomplete({           source : 'search.php'         });       });     });