Question

我正在尝试制作MVC用于培训目的，我正在学习相当陈旧的教程。本教程中的实现是使用 live（）进行的，但我决定使用jQuery 2.1.1并且必须实现 on（）方法。我做了一个小用例来澄清。

我可以在页面上插入新元素，同时在数据库中添加它们
我可以删除DB和DOM
我不能删除既不是从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');

//没有必要相关，它只是有助于代码清晰度

$('#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;
});

}）;

此时我没有关注的另一个问题是，如果我删除$ .post方法中的父级（如上面的代码所示），它不会被删除，只有当我移动时post方法之外的那一行。对此的任何澄清也将非常感激。

Answer 1

使用event delegation和event.preventDefault()停止默认操作

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

        event.preventDefault();

        // your code come here
});

.on（）方法问题

1 个答案: