Javascript .on（）方法存在问题

我试图制作一个MVC用于培训目的，我正在遵循一个相当古老的教程。本教程中的实现是使用live（）实现的，但我决定使用jQuery 2.1.1，并且必须在（）上实现方法。我做了一个小用例来澄清

在DB中添加新元素时，我可以在页面上插入新元素

我可以从DB和DOM中删除页面加载时DB中存在的预加载元素

我无法从db或DOM中删除实时添加的元素

这是我的全部代码

$(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').on("click", function() {
        delItem = $(this);
        var id = $(this).attr('rel');

        $.post('dashboard/xhrDeleteListing', {'id': id}, function(o) {
            delItem.parent().remove(); // THIS IS NOT EXECUTED AT ALL
        }, 'json');

        return false;
    });
}, 'json');

$（函数（）{
$.get（'dashboard/xhrGetListings'，函数（o）{
对于（变量i=0；i

//不一定相关，它只是帮助代码清晰

$('#randomInsert').on("submit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    console.log(data);

    $.post(url, data, function(o) {
        $('#listInserts').append('<div>' + o.text + ' <a class="del" rel="' + o.id + '" href="#">X</a></div>');
    }, 'json');

    return false;
});

$（'#随机插入'）。在（“提交”，函数（）{
var url=$（this.attr（'action'）；
var data=$（this.serialize（）；
控制台日志（数据）；
$.post（url、数据、函数（o）{
$（'#listInserts'）。追加（''+o.text+''）；
}“json”）；
返回false；
});

}))

---

另一个我现在没有重点关注的问题是，如果我在$.post方法中删除父对象（如上面的代码所示），它不会被删除，只有当我将该行移到post方法之外时才会被删除。如果您对此有任何澄清，我们将不胜感激。

使用

事件委派
和
事件.preventDefault（）
它将停止默认操作

$('#listInserts').on("click", '.del' , function(event) {

        event.preventDefault();

        // your code come here
});

$.post（'dashboard/xhrDeleteListing'…）
此请求是否成功完成？你有错误吗？检查js调试工具，它已成功执行。。。这意味着关联的代码已运行，但括号内的任何内容都不会执行。（控制台上没有错误）它调用的代码可能已运行，但如果它没有返回HTTP状态代码200 OK，则不会调用该函数。您的浏览器记录所有ajax调用，仔细检查相关调用的状态返回。对于预加载的元素（也已删除），它返回代码200；对于通过$（“#randomInsert”）新插入的元素，它在单击删除链接时不做任何操作。