即使删除了选择器,Jquery click-function也能继续工作

时间:2011-10-30 09:11:00

标签: javascript jquery

我尝试通过删除用于在javascript中触发行为的选择器来暂时禁用某个功能。即使删除了选择器(.next),该函数也会继续工作。

beta.art89.se是网页。单击项目,然后右下角的箭头指向激活。

代码:

$.showElement = function( index ) {
    last_prev_object = $('#pagination .prev').clone(true);
    last_next_object = $('#pagination .next').clone(true);

    var project_html = $.parseElement(index);

    if(project_html != '') {
        $(".content-bg").html(project_html);

        $('#pagination .prev').unbind('click');
        $('#pagination .prev').bind('click', function(e) {
            e.preventDefault();
            $('#pagination .prev').removeClass('prev');
            $(".content-bg")
                .addClass('temp_content')
                .removeClass('current_content')
                .before($('<div class="content-bg current_content"></div>').html($.parseElement(current_index-1)))
                .animate({'left': '+=640px'}, 600);
            $(".content-bg.current_content")
                .css('top', '0px')
                .css('left', (parseInt($(".content-bg.temp_content").css('left'))-640)+'px')
                .animate({'left': '+=640px'}, 600, function(){$(".content-bg.temp_content").remove()});
        });

        $('#pagination .next').unbind('click');
        $('#pagination .next').bind('click', function(e) {
            e.preventDefault();
            $('#pagination .next').removeClass('next');

            $(".content-bg")
                .addClass('temp_content')
                .removeClass('current_content')
                .after($('<div class="content-bg current_content"></div>').html($.parseElement(current_index+1)))
                .animate({'left': '-=640px'}, 600);
            $(".content-bg.current_content")
                .css('top', '0px')
                .css('left', (parseInt($(".content-bg.temp_content").css('left'))+640)+'px')
                .animate({'left': '-=640px'}, 600, function(){$(".content-bg.temp_content").remove()}); 
        });
        $(".width-wrap").animate({'top': '-=275px'}, 600); 
        $(".content-bg").css('left', (640*position)+'px').animate({'top': '0px'}, 600);
    }
}

3 个答案:

答案 0 :(得分:4)

绑定事件处理程序时,它会在您调用.bind时绑定到元素集。未使用选择器,因此当您更改其中一个元素以使其不再与选择器匹配时,这将自动添加/删除处理程序中反映的

您可能需要使用.live,它确实使用了选择器,并且会在事件被触发时自动将事件处理程序绑定到选择器匹配的元素。

答案 1 :(得分:1)

评论绑定$('#pagination .next')$('#pagination .prev')可以根据需要使用。如果我没有误解你的要求。

您在返回项目时是否已使用导航项的克隆版本。我想你不需要再次重新绑定你的元素,因为它已经绑定了你正在替换你的克隆元素。

$.showElement = function( index ) {
    last_prev_object = $('#pagination .prev').clone(true);
    last_next_object = $('#pagination .next').clone(true);

    var project_html = $.parseElement(index);

    if(project_html != '') {
        $(".content-bg").html(project_html);

        $('#pagination .prev').unbind('click');
        /*$('#pagination .prev').bind('click', function(e) {
            e.preventDefault();
            $('#pagination .prev').removeClass('prev');
            $(".content-bg")
                .addClass('temp_content')
                .removeClass('current_content')
                .before($('<div class="content-bg current_content"></div>').html($.parseElement(current_index-1)))
                .animate({'left': '+=640px'}, 600);
            $(".content-bg.current_content")
                .css('top', '0px')
                .css('left', (parseInt($(".content-bg.temp_content").css('left'))-640)+'px')
                .animate({'left': '+=640px'}, 600, function(){$(".content-bg.temp_content").remove()});
        });*/

        $('#pagination .next').unbind('click');
        /*$('#pagination .next').bind('click', function(e) {
            e.preventDefault();
            $('#pagination .next').removeClass('next');

            $(".content-bg")
                .addClass('temp_content')
                .removeClass('current_content')
                .after($('<div class="content-bg current_content"></div>').html($.parseElement(current_index+1)))
                .animate({'left': '-=640px'}, 600);
            $(".content-bg.current_content")
                .css('top', '0px')
                .css('left', (parseInt($(".content-bg.temp_content").css('left'))+640)+'px')
                .animate({'left': '-=640px'}, 600, function(){$(".content-bg.temp_content").remove()}); 
        });*/
        $(".width-wrap").animate({'top': '-=275px'}, 600); 
        $(".content-bg").css('left', (640*position)+'px').animate({'top': '0px'}, 600);
    }
}

如果我误解了你的要求,请告诉我。

答案 2 :(得分:0)

它不会帮助您删除.next - jQuery使用选择器来查找元素。然后它将事件处理程序添加到它。现在元素上有这个处理程序 - 在此之后你对元素做了什么没有区别,已经太晚了。

我有一种感觉,你想要.once()函数 - 这会将处理程序绑定在元素上运行一次而不再运行。