javascript - converting .live() to .on() or .click() functions jquery -

i'm following tutorial uses old version of jquery create mvc built in todo list using ajax calls. original code went follows:

$(function() {     $.get('dashboard/xhrgetlistings', function(o) {         (var = 0; < o.length; i++)         {             $('#listinserts').append('<div>' + o[i].text + '<a class="del" rel="'+o[i].id+'" href="#">x</a></div>');         }          $('.del').live('click', function() {             delitem = $(this);             var id = $(this).attr('rel');             $.post('dashboard/xhrdeletelisting', {'id': id}, function(o) {                 delitem.parent().remove();             }, 'json');             return false;         });     }, 'json');      $('#randominsert').submit(function() {         var url = $(this).attr('action');         var data = $(this).serialize();          $.post(url, data, function(o) {             $('#listinserts').append('<div>' + o.text + '<a class="del" rel="'+ o.id +'" href="#">x</a></div>');                 }, 'json');             return false;     }); }); 

when updated jquery version threw hissy fit , wouldn't work looked error , didn't .live() function , suggestion use .on()

and changed .live into

$(document).on("click", ".del", function()  

now code delete database doesn't update until page refreshed . . . missing something?

you binding event document. not need more once, , elements in question not need present when bind event. move on syntax outside of ajax callback, inside document ready.

$(function(){     $('#listinserts').on("click", ".del", function() {      });  })   

other option leave inside callback, , modify code be:

$.get('dashboard/xhrgetlistings', function(o) {     $('.del').on('click',function(){     });  }); 

note: suggested below in comment, first option more suitable in case since .del elements added in subtmit, unless want bind click event there well.