jQuery还是直播?

时间:2012-05-28 10:13:00

标签: javascript dom jquery

我最近为我构建的应用程序部署了一个无限滚动条,发现有时我需要点击两次才能发生。

我的应用程序喜欢,并且一旦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');
        };
    }
});

2 个答案:

答案 0 :(得分:1)

除非我完全错了,否则只需在点击一次后将toggle事件附加到.mini-like。尽量替换

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

使用

$(function() {...

在文档就绪而非点击

上附加切换事件处理程序

答案 1 :(得分:0)

代码$('.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');
    };
}