Double execution of a jquery function

Question

I have two jQuery scripts. First one is carousel plugin and the second one is lightbox plugin. Here is preview http://www.zlatko.ch/test/

Problem - after I close lightbox I can no longer navigate with carousel. If I add this $(document).unbind("click"); at the end of my jquery.mobileGallery.js file, then is the problem solved but then I get the second one - I can no longer navigate inside lightbox after reopening it because one click suddenly becomes two clicks and instead of one time, function is executing two times.

Can someone help me solve this problem?

html

<div class="imageGallery">
    <ul class="mainSlideShow">
        <li>
            <a rel="prettyGall" href="images/sk01.jpg"><img src="images/01.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk02.jpg"><img src="images/02.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk03.jpg"><img src="images/03.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk04.jpg"><img src="images/04.jpg" /></a>
        </li>
        <li>
            <a rel="prettyGall" href="images/sk05.jpg"><img src="images/05.jpg" /></a>
        </li>
    </ul>
<div class="slidernavigation"></div>
<div id="leftNav"></div>
<div id="rightNav"></div>
<div class="descWrapper">
    <ul class="mainDescShow">
        <li>
            <span class="imageDescription">vitae scelerisque dolor elit ac mi. Sed dignissim ...</span>
        </li>
        <li></li>
        <li>
            <span class="imageDescription">vitae scelerisque dolor elit ac mi. Sed dignissim ...</span>
        </li>
        <li></li>
        <li></li>
    </ul>
</div>

jQuery functions

(function($) {

    $.fn.carouZel = function(options) {

        //Defaults to extend options
        var defaults = {  
            FirstSliderSpeed: 500,                  //Speed of the first slider in milliseconds
            SecondSliderSpeed: 800,                //Speed of the second slider in milliseconds
            SlideShow: true,                        //Slideshow on - true, off - false
            SlideShowInterval: 10000,                 //Slideshow interval in milliseconds
            BulletNavPos: ".slidernavigation"
        };  

        //Extend those options
        var options = $.extend(defaults, options);

        var obj = $(this); //detailsVisualGallery

    if (obj.length > 0){

            var firstSlider = $(this);
            var secondSlider = $('.mainDescShow');

            var ChildrenNumber = firstSlider.children().length;
            var liWidth = firstSlider.children('li:first').width();
            var liHeight = firstSlider.children('li:first').outerHeight() + 10;


            var maxW = 0;
            var maxH = 0;
            $(".mainSlideShow img").load().each(
                function(){

                    var c_width = parseInt($(this).width());
                    var c_height = parseInt($(this).height());
                    if (c_width > maxW) {
                        maxW = c_width;
                    }
                    if (c_height > maxH) {
                        maxH = c_height;
                    }
                }
            );

            var liHeight = maxH + 10;

            $('.mainSlideShow li').css({
                'height': liHeight,
                'width': 660
            });

            $(".mainSlideShow img").load().each(
                function(){
                    var imgH = $(this).height();
                    var imgW = $(this).width();

                    $(this).css({
                        //'position': 'absolute',
                        'margin-top': -1 * (imgH / 2) + 'px',
                        'margin-left': -1 * (imgW / 2) + 'px'
                        });
                    $(this).fadeIn('slow')
                }
            );


            //find height
            $.fn.equalizeHeights = function() {
              var maxHeight = this.map(function(i,e) {
                return $(e).outerHeight() + 10;
              }).get();

              return this.height( Math.max.apply(this, maxHeight) );
            };

            $.fn.justNumber = function() {
              var maxHeight = this.map(function(i,e) {
                return $(e).outerHeight() + 10;
              }).get();

              return  Math.max.apply(this, maxHeight) ;
            };

            //wrap
            firstSlider.wrap('<div class="sliderWrapper" />');
            firstSlider.parent('.sliderWrapper').css({'width': '100%', 'height': + liHeight + 'px', 'position': 'relative', 'overflow':'hidden'});

            //set width & height
            $(this).css({'width': liWidth * (ChildrenNumber + 1) +'px', 'height': liHeight +'px', 'overflow':'hidden', 'position':'relative' });
            $('.mainDescShow').css({'width': liWidth * (ChildrenNumber + 1) +'px', 'overflow':'hidden', 'position':'relative' });



            //create bullet navigation
            $(options.BulletNavPos).prepend("<ul id=\"bulletNav\"></ul>");

            for (var i = 0; i < ChildrenNumber ; i++) {
                $('#bulletNav').append("<li>" + (i+1) +"</li>");
            }

            //clone first time
            firstSlider.children('li:first').clone().appendTo(firstSlider);

            function CloneSlide(){
                firstSlider.children('li:eq(1)').clone().appendTo(firstSlider);

                firstSlider.children('li:first').detach();
            }
            //place navigation
            var positionnav = $(this).offset();

            $('#leftNav').css({left: positionnav.left, top: positionnav.top + (liHeight/2) });
            $('#rightNav').css({left: positionnav.left+ liWidth- 45 , top: positionnav.top + (liHeight/2)});

            // setting the active bullet
            function setActiveBullet() {
                    $('#bulletNav li').removeClass('active');
                    $('#rightNav , #leftNav').removeClass('false');

                    if (firstSlider.position().left >= 0 ){
                            $('#bulletNav').children('li').eq(0).addClass('active');
                            $('#leftNav').addClass('false');
                    }
                    else {
                        $('#bulletNav').children('li').eq(""+ (Math.abs(firstSlider.position().left) / liWidth) + "" ).addClass('active');
                            if( (Math.abs(firstSlider.position().left) / liWidth) + 1 == ChildrenNumber){
                                $('#rightNav').addClass('false');
                            }
                    }
            }
            setActiveBullet();

            $(".mGalleryItem img").load(
                function(){
                    $(this).show();
                }
            );

            //bullet navigation
            $('#bulletNav li').click(function() {

                var bulletPos = $(this).index(); //index gets eq

                firstSlider.animate({
                    left: '-'+(bulletPos * liWidth) +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        //CloneSlide();
                        //firstSlider.css({'left': '0px'});
                        setActiveBullet()
                });

                setActiveBullet();

            });

            $('.mainSlideShow , .mainDescShow').css({
                'visibility':'visible'
            });

            $("#rightNav:not(.false)").live("click",function(event){

                event.preventDefault();

                var activeBulletPos = Math.abs(firstSlider.position().left) / liWidth ;

                firstSlider.animate({
                    left: '-='+ liWidth +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        if ( activeBulletPos == (ChildrenNumber - 1) ) {
                            firstSlider.css({'left': '0px'});
                        }
                        setActiveBullet()
                });

                secondSlider.animate({
                    left: '-='+ liWidth +'px'
                    }, options.FirstSliderSpeed, function() {
                        // Animation complete.
                        if ( activeBulletPos == (ChildrenNumber - 1) ) {
                            secondSlider.css({'left': '0px'});
                        }
                });


                return false;
            })

            $("#leftNav:not(.false)").live("click",function(event){

                event.preventDefault();

                    var sliderPos = firstSlider.position();

                    if (sliderPos.left >= 0 ) { 
                            firstSlider.animate({
                                    left: liWidth- (liWidth * ChildrenNumber) +'px'
                            }, options.FirstSliderSpeed, function() {
                                    setActiveBullet() // Animation complete.
                                    //showHide();
                               });

                            secondSlider.animate({
                                    left: liWidth- (liWidth * ChildrenNumber) +'px'
                            }, options.FirstSliderSpeed, function() {
                               });
                    }
                    else {
                            firstSlider.animate({
                                    left: '+='+ liWidth +'px'
                            }, options.FirstSliderSpeed, function() {
                                    setActiveBullet() // Animation complete.
                                    //showHide();
                               });

                            secondSlider.animate({
                                    left: '+='+ liWidth +'px'
                            }, options.FirstSliderSpeed, function() {
                               });
                    }

                setActiveBullet();
            })




        }
    }//call zlider
})(jQuery);

(function($) {
    $.fn.mGallery = function(options) {
        var defaults = {
            SlideShow: true,
            SlideShowInterval: 10000
        };  

        window.top.scrollTo(0, 1);

        //Extend those options
        var options = $.extend(defaults, options);

        var obj = $(this); 

        if (obj.length > 0){
            obj.on("click",function(){

                var winH = $(window).height();
                var winW = $(window).width();


                $('body').append("<div class=\"mGalleryWrap\"></div>");
                $('.mGalleryWrap').css({
                    'width': winW + 'px',
                    'height': winH + 'px'
                    });

                //how many children
                var chCount = obj.length;
                var chPosition = $(this).parent().prevAll().length;

                //create list
                $('.mGalleryWrap').append("<ul class=\"mGalleryList\"></ul>");
                $('.mGalleryWrap').append("<ul class=\"mGalleryDescList\"></ul>");
                $('.mGalleryWrap').append("<ul id=\"mGalleryBull\"></ul>");

                //create navigation
                $('.mGalleryWrap').append("<div class=\"mGalleryItemRightNav\"></div>");
                $('.mGalleryWrap').append("<div class=\"mGalleryItemLeftNav\"></div>");
                $('.mGalleryWrap').append("<div class=\"mGalleryClose\"></div>");
                $('.mGalleryWrap').append("<div id=\"mGalleryDescSlide\" class=\"mGalleryDown\"></div>");


                if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
                    $('.mGalleryItemRightNav, .mGalleryItemLeftNav').css({
                        'visibility':'hidden'
                        });
                }


                $('.mGalleryItemRightNav , .mGalleryItemLeftNav').css({
                    'top': (winH / 2) - 15 + 'px'
                    });

                //create list children
                for (var itmp = 0; itmp < chCount ; itmp++) {
                        var imageURL = $("a[rel^='prettyGall']").eq(itmp).attr('href');

                        if($(".mainDescShow li").eq(itmp).html().length > 0){
                            var imageDESC = $(".mainDescShow li").eq(itmp).html();
                            var cls = 'mGalleryDescItem';
                        }
                        else{
                            var imageDESC = '';
                            var cls = 'mGalleryDescEmptyItem';
                        }

                        //imageDescription
                        $(".mGalleryList").append("<li class=\"mGalleryItem\"><img class=\"mGalleryItemImg\" src=\""+imageURL+"\"></li>");
                        $(".mGalleryDescList").append("<li class=\""+cls+"\">"+imageDESC+"</li>");
                        $("#mGalleryBull").append("<li>"+(itmp + 1)+"</li>");
                }

                $(".mGalleryItemImg").load(
                    function(){
                        var imgH = $(this).height();
                        var imgW = $(this).width();

                        $(this).css({
                            'margin-top': -1 * (imgH / 2) + 'px',
                            'margin-left': -1 * (imgW / 2) + 'px',
                            'visibility':'visible'
                            });

                    }
                );

                $('#mGalleryBull').css({
                    'left': (winW / 2) - (chCount * 8) + 'px'
                    });

                $('.mGalleryList').css({
                    'width': (winW * chCount) + 'px',
                    'height': winH + 'px',
                    'left': 0 - (chPosition * winW) + 'px'
                    });

                $('.mGalleryDescList').css({
                    'width': (winW * chCount) + 'px',
                    'height': '100px',
                    'left': 0 - (chPosition * winW) + 'px'
                    });

                $('.mGalleryItem').css({
                    'width': winW + 'px',
                    'height': winH + 'px',
                    });

                $('.mGalleryDescEmptyItem , .mGalleryDescItem').css({
                    'width': winW + 'px'
                    });

                $('.mGalleryItem img').css({
                    'max-height': (winH - 20) + 'px',
                    'max-width': (winW - 20) + 'px',
                    });

                function setActiveNav() {
                    $('.mGalleryItemRightNav , .mGalleryItemLeftNav').removeClass('false');
                    var p = $('.mGalleryList').position()
                    if(p.left >= 0){
                        $('.mGalleryItemRightNav').addClass('false');
                    }
                    if(p.left <= Math.abs((chCount - 1) * winW ) * -1){
                        $('.mGalleryItemLeftNav').addClass('false');
                    }
                }

                function setActiveBullet() {
                    $('#mGalleryBull').children('li').removeClass('active');
                    var p = $('.mGalleryList').position();

                    var eqIndex = Math.abs(p.left)/winW; 

                    $('#mGalleryBull').children('li').eq(eqIndex).addClass('active');
                }

                setActiveNav();
                setActiveBullet();

                //move right
                $('.mGalleryItemRightNav:not(.false)').live("click",function(event){
                    event.preventDefault();

                    $('.mGalleryList , .mGalleryDescList').animate({
                        left: '+='+winW+'',
                    }, 300, function() {
                        setActiveNav();
                        setActiveBullet();
                        });

                });

                $('.mGalleryItemLeftNav:not(.false)').live("click",function(event){
                    event.preventDefault();

                    $('.mGalleryList , .mGalleryDescList').animate({
                        left: '-='+winW+'',
                    }, 300, function() {
                        setActiveNav();
                        setActiveBullet();
                        });
                });


                $('.mGalleryDown').live("click",function(){
                    $(this).removeClass('mGalleryDown').addClass('mGalleryUp');

                    $('.mGalleryDescList , #mGalleryDescSlide').animate({
                        bottom: '-=80',
                    }, 300, function() {

                    });
                });

                $('.mGalleryUp').live("click",function(){
                    $(this).removeClass('mGalleryUp').addClass('mGalleryDown');

                    $('.mGalleryDescList , #mGalleryDescSlide').animate({
                        bottom: '+=80',
                    }, 300, function() {

                    });
                });


                $('.mGalleryClose').click(function(){
                    $('.mGalleryWrap').remove();
                    //$(document).bind("click");
                });


                return false;
            });
        }
    }
})(jQuery);

calling of jQuery functions

    $(window).bind("load", function() {
        if($('.mainSlideShow').children().length > 0){
            $('.mainSlideShow').carouZel({
                SlideShow: false,
            });
        }
    }); 

    $(document).ready(function() {
        $("a[rel^='prettyGall']").mGallery();
    });

Answer 1

There's most likely an return false statement or an e.stopPropagation() somewhere in one of the click handlers. In other words there are two bindings for the click, but the event isn't being propagated up the event tree to get to both

Answer 2

What happens if you try using 'on' on the initial item click (the image)?
instead of:

obj.click(function(){

use:

obj.on("click", func...

Would it not be better?

Also I get:

ReferenceError: IntervalClearing is not defined     
IntervalClearing();

Answer 3

So I had to do it by myself...

I have added $(document).unbind("click"); at the end of mGallery function and instead of

$("#rightNav:not(.false)").live("click",function(event)

I used

$("#rightNav").click(function(event)

together with

if(!$(this).hasClass('false')){
}

I still don't know why is this working and my previous code not... but it's working.

Answer 4

I think bidoron had the right idea, you just need to do more to make it work.

Split your initialization. Once per page, and once per interaction.

Use 'on' with CSS selectors to register on page load to recieve all of the click events:

$("body").on('click', "#rightNav:not(.false)", function(event) {
    ...
});

Repeat for all of your click events. Since you only register once, there's no duplication of event dispatch. Also this works great for when you may have more than one of the same item on the page. They all 'just work' without any bookkeeping. It's a tad slower than registering on the precise element, but unless you're writing a game in Javascript, you will never notice the difference. Your fellow coders however will notice an immediate quality of life improvement.