jQuery on or live?

本文关键字：live or on jQuery 更新时间：2023-09-26

我最近在我构建的应用程序上部署了一个无限滚动，发现有时我需要单击两次才能发生某些事情。

我的应用程序有喜欢，一旦

dom 加载完毕，我需要在它更改之前单击两次喜欢按钮，然后一旦我单击其他按钮就可以了，但我总是必须单击一次才能让应用程序几乎"唤醒"

有没有更好的解决方案？

$(document).ready(function() {
    function runUpdate(url, item) {
        $.ajax({
            type: "GET",
            url: url,
            cache: false,
            success: function(data){
                if (data == '200') {
                    removeAddColor(item);
                }
            }
        });
    }
    $('.mini-like').live('click', function(){
        $('.mini-like').toggle(
            function() {
                var item = $(this);
                var href = item.attr('href');
                runUpdate(href, item);
            },
            function() {
                var item = $(this);
                var rel = item.attr('rel');
                runUpdate(rel, item);
            }
        );
    });
    function removeAddColorFollow(item) {
        var href = $(this).attr('href');
        var rel = $(this).attr('rel');
        if (item.hasClass('btn-success')) {
            $(item).removeClass('btn-success').attr('href', href).attr('rel', rel);
            $(item).find('i').removeClass('icon-white');
        } else {
            $(item).addClass('btn-success').attr('href', rel).attr('rel', href);
            $(item).find('i').addClass('icon-white');
        };
    }
});

好吧，除非我完全错了，否则只有在单击一次后，您才会将切换事件附加到 .mini-like。尝试只替换

$('.mini-like').live('click', function() {...

跟

$(function() {...

将切换事件处理程序附加到文档就绪而不是单击时

代码$('.mini-like').live('click',...应放在$(document).ready()

您可以使用.on代替.live。由于.on是一种新方法，并且现在已弃用.live因此您应该使用.on

更新重写的版本将是

$(document).ready(function(){
 $('.mini-like').on('click', function(){
    $('.mini-like').toggle(
        function() {
            var item = $(this);
            var href = item.attr('href');
            runUpdate(href, item);
        },
        function() {
            var item = $(this);
            var rel = item.attr('rel');
            runUpdate(rel, item);
        }
    );
 });
});
function runUpdate(url, item) {
    $.ajax({
        type: "GET",
        url: url,
        cache: false,
        success: function(data){
            if (data == '200') {
                removeAddColor(item);
            }
        }
    });
}

function removeAddColorFollow(item) {
    var href = $(this).attr('href');
    var rel = $(this).attr('rel');
    if (item.hasClass('btn-success')) {
        $(item).removeClass('btn-success').attr('href', href).attr('rel', rel);
        $(item).find('i').removeClass('icon-white');
    } else {
        $(item).addClass('btn-success').attr('href', rel).attr('rel', href);
        $(item).find('i').addClass('icon-white');
    };
}