Question

我目前正在关注一个使用旧版jQuery的教程，使用ajax调用创建一个带有内置待办事项列表的mvc。原始代码如下：

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

当我更新jQuery版本时，它提出了一个非常适合的工作，因此我查找错误并且它不喜欢.live()函数，所以建议使用{{1} }

所以我将.on()更改为

.live

现在代码会从数据库中删除，但在刷新页面之前不会更新。。。我错过了什么吗？

Answer 1

您将事件绑定到document。因此，您不需要多次执行此操作，并且在绑定事件时不需要存在相关元素。将on语法移到文档准备好的文档内的ajax回调之外。

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

    });

})

其他选项是将其保留在回调中，并将您的代码修改为：

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

});

注意：正如下面评论中所建议的那样，第一个选项在这种情况下更合适，因为.del中添加了subtmit个元素，除非你想要从那里绑定click事件。

Answer 2

移动.del外部回调函数的事件处理程序
更改为重用缓存delItem
从全局范围中删除delItem

修改后的代码：

$(document).ready(function () {
    $(document).on("click", ".del", function () {
        var delItem = $(this);
        var id = delItem.attr('rel');
        $.post('dashboard/xhrDeleteListing', {
            'id': id
        }, function (o) {
            delItem.parent().remove();
        }, 'json');
    });
    $.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>');
        }
    }, '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;
    });
});

编辑修改为只在插入时点击DOM一次，绑定到'on()事件处理程序的包装器：

$(document).ready(function () {
    $('#listInserts').on("click", ".del", function () {
        var delItem = $(this);
        var id = delItem.attr('rel');
        $.post('dashboard/xhrDeleteListing', {
            'id': id
        }, function (o) {
            delItem.parent().remove();
        }, 'json');
    });

    $.get('dashboard/xhrGetListings', function (o) {
        var newlinks = ''
        for (var i = 0; i < o.length; i++) {
            newlinks = newlinks + '<div>' + o[i].text + '<a class="del" rel="' + o[i].id + '" href="#">X</a></div>';
        }
        $('#listInserts').append(newlinks);
    }, '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;
    });
});

Answer 3

以下是我将如何重写示例代码。我评论过我改变的地方。

$(function() {
    var $listInserts = $('#listInserts'); // Store the element once so we don't have to do it again

    // Function for re-usability
    function addToList (text, id) {
        $listInserts.append('<div>' + text + '<a class="del" rel="'+id+'" href="#">X</a></div>');
    }

    // Here I'm assuming that $('#listInserts') is a container for all those .del elements.
    // If you use .on() on a containing element try to keep as close to those elements as you can.
    // Keeping it close keeps the events from having to bubble up through every parent element on the page.
    $listInserts.on('click', '.del', function(e) {
        var $delItem = $(this);

        e.preventDefault(); // Stops the normal link behavior. Sort of like 'return false;' would do.

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

    $.get('dashboard/xhrGetListings', function(o) {

        for (var i = 0; i < o.length; i++)
        {
            addToList(o[i].text, o[i].id);
        }
    }, 'json');

    // Changed to .on()
    $('#randomInsert').on('submit', function(e) {
        var url = $(this).attr('action');
        var data = $(this).serialize();

        e.preventDefault();

        $.post(url, data, function(o) {
            addToList(o.text, o.id);
        }, 'json');

        return false;
    });

});

Answer 4

这是我使用最新lib的jquery脚本的解决方案：

$(function() {

$('#listInserts').on('click', '.del', function() {
    var delItem = $(this);
    var id = $(this).attr('rel');
    $.post('dashboard/xhrDeleteListing', {'id': id}, function() {
        delItem.parent().remove();
    });
});

$.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="#">elimina</a></div>');
    }
}, 'json'); // JSON = JavaScript Object Notation

$('#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="#">elimina</a></div>');
    }, 'json');
    return false;
});});

希望得到这个帮助。

将.live（）转换为.on（）或.click（）函数jquery

4 个答案: