双重执行jquery函数

Question

我有两个jQuery脚本。第一个是轮播插件，第二个是lightbox插件。这里是预览http://www.zlatko.ch/test/

问题 - 我关闭灯箱后，我不能再用旋转木马导航。如果我在我的jquery.mobileGallery.js文件的末尾添加了这个$(document).unbind("click");，那么问题是否解决了，但是我得到了第二个 - 重新打开后，我无法再在灯箱内导航，因为一次点击突然变成两次点击而不是一次，功能正在执行两次。

有人可以帮我解决这个问题吗？

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函数

(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); 

的jQuery函数调用

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

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

Answer 1

所以只好由我自己做...

我在，而不是美憬阁函数的结尾，并添加$(document).unbind("click");

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

我用

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

连同

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

我仍然不知道这是为什么的工作和我以前的代码不...但它的工作。

Answer 2

有最有可能的return false声明或e.stopPropagation()某个点击处理程序中的某处。换句话说，点击有两个绑定，但事件并没有在事件树上传播到

Answer 3

如果您尝试在初始项目单击（图像）上使用“on”，会发生什么？
代替：

obj.click(function(){ 

使用：

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

这岂不是更好吗？

而且我得到：

ReferenceError: IntervalClearing is not defined  
IntervalClearing(); 

Answer 4

我想bidoron有正确的想法，你只需要做更多的工作。

拆分您的初始化。每页一次，每次交互一次。

“上”使用与CSS选择器在网页加载注册收到所有的点击事件：

所有的点击事件

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

重复。由于您只注册一次，因此不会有重复的事件发送。这也适用于您在页面上可能有多个相同项目的情况。他们都没有任何记账就“工作”。这比在精确的元素上注册要慢很多，但除非您使用Javascript编写游戏，否则您将永远不会注意到其中的差异。然而，您的同行编码人员会注意到生活质量的直接改善。