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

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

Im currently following a tutorial that uses an old version of jquery to
create and mvc with a built in todo list using ajax calls . . . now the
original code went as follows :
$(function() {
$.get('dashboard/xhrGetListings', function(o) {
for (var i = 0; i < 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 I updated the jquery version it threw a hissy fit and wouldnt work so
i looked up the error and it didnt like up the .live() function and so a
suggestion was to use .on()
and so i changed the .live into
$(document).on("click", ".del", function()
and now the code does delete from the database but doesn;t update until
the page is refreshed . . . am I missing something