使用jQuery 2.0.3时，两函数合并到同一文件仅首个生效的问题

我瞅了瞅你的代码，发现几个关键问题导致两个函数无法同时正常工作，咱们一步步来修复：

核心问题分析 #

1. 动态元素事件绑定失效：原插件里直接给.next、.prev这些动态生成的元素绑定click事件，当DOM元素被重新渲染（比如切换图片时更新指示器），旧的事件绑定会丢失，虽然这不会直接影响回到顶部功能，但插件内部的错误可能导致后续JS代码中断执行。
2. 窗口尺寸未实时更新：插件初始化时只获取一次窗口宽高，窗口大小变化后画廊定位会出错，可能引发隐性错误。
3. 层级遮挡问题：回到顶部按钮的z-index可能低于插件的遮罩层，导致按钮无法被点击。

修复后的完整代码 #

1. 优化后的picEyes插件代码 #

(function($){ 
  $.fn.picEyes = function(){ 
    var $obj = this; 
    var num, zg = $obj.length - 1; 
    var win_w = $(window).width(); 
    var win_h = $(window).height(); 
    var eyeHtml = '<div class="picshade"></div>' +
                  '<a class="pictures_eyes_close" href="javascript:;"></a>' +
                  '<div class="pictures_eyes">' +
                    '<div class="pictures_eyes_in">' +
                      '<img src="" />' +
                      '<div class="next"></div>' +
                      '<div class="prev"></div>' +
                    '</div>' +
                  '</div>' +
                  '<div class="pictures_eyes_indicators"></div>'; 
    
    // 先移除已存在的插件元素，避免重复添加导致冲突
    $('.picshade, .pictures_eyes_close, .pictures_eyes, .pictures_eyes_indicators').remove();
    $('body').append(eyeHtml); 

    $obj.click(function() { 
      var currentWinH = $(window).height(); // 实时获取窗口高度
      $(".picshade").css("height", currentWinH); 
      var n = $(this).find("img").attr('src'); 
      $(".pictures_eyes img").attr("src", n); 
      num = $obj.index(this); 
      popwin($('.pictures_eyes')); 
    }); 

    // 事件委托绑定关闭事件，避免动态元素事件丢失
    $('body').on('click', '.pictures_eyes_close, .picshade, .pictures_eyes', function(e) { 
      // 点击内容区域、图片、前后按钮时不关闭画廊
      if($(e.target).hasClass('pictures_eyes_in') || $(e.target).is('.pictures_eyes_in img, .next, .prev')){
        return;
      }
      $(".picshade, .pictures_eyes, .pictures_eyes_close, .pictures_eyes_indicators").fadeOut(); 
      $('body').css({'overflow':'auto'}); 
    }); 

    // 事件委托阻止图片点击冒泡
    $('body').on('click', '.pictures_eyes img', function(e){ 
      stopPropagation(e); 
    }); 

    // 事件委托绑定下一张按钮
    $('body').on('click', '.next', function(e){ 
      if(num < zg){ num++; }else{ num = 0; } 
      var xx = $obj.eq(num).find('img').attr("src"); 
      $(".pictures_eyes img").attr("src", xx); 
      stopPropagation(e); 
      popwin($('.pictures_eyes')); 
    }); 

    // 事件委托绑定上一张按钮
    $('body').on('click', '.prev', function(e){ 
      if(num > 0){ num--; }else{ num = zg; } 
      var xx = $obj.eq(num).find('img').attr("src"); 
      $(".pictures_eyes img").attr("src", xx); 
      stopPropagation(e); 
      popwin($('.pictures_eyes')); 
    }); 

    // 事件委托绑定指示器点击事件
    $('body').on('click', '.pictures_eyes_indicators a', function(){ 
      $(this).addClass('current').siblings().removeClass('current'); 
      var xx = $(this).find('img').attr("src"); 
      $(".pictures_eyes img").attr("src", xx); 
      num = $(this).index(); // 更新当前索引
      updatePlace($('.pictures_eyes')); 
    }); 

    function popwin(obj){ 
      $('body').css({'overflow':'hidden'}); 
      var currentWinW = $(window).width(); 
      var currentWinH = $(window).height(); 
      var Pwidth = obj.width(); 
      var Pheight = obj.height(); 
      obj.css({left:(currentWinW - Pwidth)/2, top:(currentWinH - Pheight)/2}).show(); 
      $('.picshade, .pictures_eyes_close').fadeIn(); 
      indicatorsList(); 
    } 

    function updatePlace(obj){ 
      var currentWinW = $(window).width(); 
      var currentWinH = $(window).height(); 
      var Pwidth = obj.width(); 
      var Pheight = obj.height(); 
      obj.css({left:(currentWinW - Pwidth)/2, top:(currentWinH - Pheight)/2}); 
    } 

    function indicatorsList(){ 
      var indHtml = ''; 
      $obj.each(function(){ 
        var img = $(this).find('img').attr('src'); 
        indHtml +='<a href="javascript:;"><img src="'+img+'"/></a>'; 
      }); 
      $('.pictures_eyes_indicators').html(indHtml).fadeIn(); 
      $('.pictures_eyes_indicators a').eq(num).addClass('current').siblings().removeClass('current'); 
    } 

    function stopPropagation(e) { 
      e = e || window.event; 
      if(e.stopPropagation) { 
        e.stopPropagation(); 
      } else { 
        e.cancelBubble = true; 
      } 
    } 

    // 监听窗口大小变化，实时更新画廊位置
    $(window).on('resize', function(){
      win_w = $(window).width();
      win_h = $(window).height();
      if($('.pictures_eyes').is(':visible')){
        updatePlace($('.pictures_eyes'));
      }
    });
  } 
})(jQuery);

2. 层级调整的CSS代码 #

/* 确保回到顶部按钮在最上层 */
#scroll {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* 高于插件遮罩层的z-index */
  display: none;
}

/* 插件遮罩层设置合理层级 */
.picshade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 999;
}

3. 初始化函数代码 #

$(function() { 
  // 初始化图片画廊
  $('.demo li').picEyes(); 

  // 回到顶部功能
  var ScrollButton = $("#scroll"); 

  // 监听滚动事件显示/隐藏按钮
  $(window).scroll(function() { 
    if ($(this).scrollTop() >= 50) { 
      ScrollButton.show(); 
    } else { 
      ScrollButton.hide(); 
    } 
  }); 

  // 点击按钮平滑回到顶部
  ScrollButton.click(function(e) { 
    e.preventDefault();
    $("html, body").animate({ scrollTop: 0 }, 800); 
  }); 
});

关键修复点说明 #

1. 事件委托替代直接绑定：用$('body').on('click', selector, function)的方式绑定动态元素事件，确保元素重新渲染后事件依然有效。
2. 实时获取窗口尺寸：在弹出画廊和更新位置时实时获取窗口宽高，避免窗口大小变化后定位错误。
3. 层级冲突解决：给回到顶部按钮设置更高的z-index，保证不会被插件遮罩层遮挡。
4. 避免重复DOM元素：初始化插件时先移除已存在的插件元素，防止多次调用导致DOM冗余。

内容的提问来源于stack exchange，提问作者user8845321