将.live()转换为.on()或.click()函数jquery

时间:2013-08-28 20:59:26

标签: javascript ajax jquery

我目前正在关注一个使用旧版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

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

4 个答案:

答案 0 :(得分:1)

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

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

    });

})  

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

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

});

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

答案 1 :(得分: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;
    });
});

答案 2 :(得分: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;
    });

});

答案 3 :(得分:0)

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

希望得到这个帮助。