Javascript关闭快门重新加载.js

Question

我在下面找到了代码片段，但它不起作用。有人可以建议吗？

使用 NextGen 图库和快门效果时，我希望能够在照片外部单击时关闭照片灯箱。默认操作是单击照片以关闭。这太奇怪了。

当我进入Chrome JavaScript调试并键入shutterReloaded.hideShutter();时，它会关闭灯箱。但是，当我单击3个元素之一时，它不会关闭它。未观察到任何错误。

addCloseButton 函数也不起作用。我假设它们是相关的问题。

<script type="text/javascript">
 $(document).ready(function() {
  $(document).on('click', '#shDisplay', function(e) {
   shutterReloaded.hideShutter();
  });
  $(document).on('click', '#shShutter', function(e) {
   shutterReloaded.hideShutter();
  });
  $('.ngg-gallery-thumbnail').click(function(e) {
   addCloseButton();
  });
  $(document).on('click', '#nextpic', function(e) {
   addCloseButton();
  });
  $(document).on('click', '#prevpic', function(e) {
   addCloseButton();
  });
  function addCloseButton() {
   $('#shWrap').append('<a href="javascript:void(0)" onclick="shutterReloaded.hideShutter();" id="shCloseButton">[x]</a>');
   $('#shWrap').css({'position':'relative'});
   $('#shCloseButton').css({
    'position': 'absolute',
    'top':'5px',
    'left':'50%'
   });
   var halfWidth = ($('#shTopImg').width() / 2) - 25;
   $('#shCloseButton').css({'margin-left': halfWidth + 'px'});
  }
 });
</script>

以下是图库 HTML 中的一个片段：

<div id="ngg-image-103" class="ngg-gallery-thumbnail-box"  >
            <div class="ngg-gallery-thumbnail" >
                <a href="http://mysite1.com/IMG_0197.jpg" title=" " class="shutterset_set_3" >
                                        <img title="IMG_0197" alt="Pechie " src="http://mysite1.com/IMG0197.jpg" width="215" height="215" />
                                    </a>
                <label><input type="checkbox" name="pid[]" value="103" /><span id="image_label">IMG_0197</span></label>
            </div>
        </div>

当您单击照片时，看起来好像快门重新加载使用此信息重写到 DOM，但针对单击的新照片进行了更新：

<div id="shDisplay" style="top: 3px;">
<div id="shWrap" style="visibility: visible;">
<img src="http://mysite1.com/IMG_0437.jpg" id="shTopImg" title="Click to Close" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" width="605" height="908">
<div id="shTitle" style="width: 601px;">
<div id="shPrev"></div>
<div id="shNext">
<a href="#" id="nextpic" onclick="shutterReloaded.make(10);return false">&gt;&gt;</a>
</div>
<div id="shName"> </div>
<div id="shCount">&nbsp;(&nbsp;1&nbsp;/&nbsp;48&nbsp;)&nbsp;</div>
</div></div></div>

Answer 1

你有HTML代码的例子吗？似乎您的处理程序不起作用...也许是因为您使用了错误的选择器...

然而。。。每次生成关闭处理程序时，当您确定绑定处理程序的元素在 DOM 中时，您可以尝试重新绑定"关闭处理程序"：

<script type="text/javascript">
 $(function() {
   if(typeof $.fn.on === "undefined") $.fn.on = $.fn.live;
   if(typeof $.fn.off === "undefined") $.fn.off = $.fn.die;
   $('.ngg-gallery-thumbnail,#nextpic,#prevpic').on("click", function(e) {
        addCloseButton();
   });
   function addCloseButton() {
       $('#shWrap').css({'position':'relative'});
       $('#shWrap').append('<a href="javascript:void(0)" onclick="shutterReloaded.hideShutter();" style="position:absolute; top:5px; left:50%" id="shCloseButton">[x]</a>');
       var halfWidth = ($('#shTopImg').width() / 2) - 25;
       $('#shCloseButton').css({'margin-left': halfWidth + 'px'});
       $('#shShutter,#shDisplay').off().on('click', function(e) { // I do a syntax error here: .off.on ---> .off().on 
            shutterReloaded.hideShutter();
       });
   }
 });
</script>