javascript - .on イベント ハンドラーを使用し、ページを更新せずに要素を削除する

Question

phpMyAdmin データベースから取得しているいくつかの単純なデータがあります。このデータを div に入力してXから、ページからアイテムを削除する必要があります。削除は問題なく行われますが、ライブ イベントではありません。要素を削除する前に、ページをリロードする必要があります。なぜそれが起こっているのですか？onアイテムを削除するためにクリックされたときに発生するイベントを指定しましたXが、何も起こりません。

HTML

<div id="listInserts">
    dog<a class="del" rel="1" href="#">X</a>
    cat<a class="del" rel="2" href="#">X</a>
    bird<a class="del" rel="3" href="#">X</a>
</div>

JS

$(function() {

    $.get('dashboard/xhrGetListings', function(o) {
     //Pulling results from database
        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>');
        }
     //Perform live delete
        $('#listInserts').on('click', 'a.del', function(e) {
            var delItem = $(this);
            var id = $(this).attr('rel');

            $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
                delItem.parent().remove();
            }, 'json');

            return false;
        });

    }, 'json');

});