1

我目前正在关注一个使用旧版本 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()功能，因此建议使用.on()

所以我把它.live改成了

$(document).on("click", ".del", function()

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

4

4 回答 4

1

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

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

    });

})

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

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

});

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

于 2013-08-28T21:06:20.813 回答
0

以下是我将如何重新编写示例代码。我已经评论了我改变的地方。

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

});
于 2013-08-29T13:15:50.780 回答
0

这是我使用最新库的这个 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;
});});

希望这有帮助。

于 2014-01-08T08:31:24.277 回答
0
  • .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;
    });
});
于 2013-08-29T12:49:07.150 回答