Jquery - How can I dynamically add a clickable element after redraw -

i have seen other posts on topic change elements on redraw. have list of items, want click on 1 , delete via ajax , redraw same list , have clickable. click after redraw isn't working. following code redraws list fine, once. 'listto' items no longer clickable. thought 'on' supposed handle this. how can make work?

$('.listto').on('click',function() {     var tmp = $(this).attr('id').substr(1).split("|");     $.ajax({url: '/contact/removefromlist/'+tmp[0]+'/'+tmp[1],         success: function(data) {             redrawtolist(data,tmp[1])         }     }); });  function redrawtolist(data,item) {     var dat = json.parse(data);     var str = "";     $.each(dat, function(index, rel) {         str += '<div id="t'+index+'|'+item+'" class="listto">'+rel+'</div>';     });     $('#tolist').html(str); } 

change handler :

$('#tolist').on('click', '.listto', function(){}) 

using event delegation way bind event dynamicly added elements.

you have plenty information direct binding , delegated binding on page : http://api.jquery.com/on/