Question

I try to temporarily disable a function by removing the selector that is used to trigger a behaviour in javascript. Even though the selector (.next) is removed, the function keeps working.

beta.art89.se is the webpage. Click a project and then the arrow pointing right in the bottom right corner to activate.

The code:

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

Answer 1

Commenting the bind $('#pagination .next') and $('#pagination .prev') works as you want. If I am not misunderstood your requirements.

Are you already using the clone version of your navigation items when you are returning to your projects. I guess you don’t need to rebind your element once again as it is already bind and you are replacing your cloned element.

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

Let me know if I have mistaken your requirement.