0

我正在使用以下脚本： http: //pop.seaofclouds.com/

问题是，如果您多次调用脚本，它会导致弹出窗口中的弹出窗口的级联效果与您调用脚本的次数一样多。

我试图弄清楚如何在已经设置弹出窗口时阻止它执行。这是脚本：

//
//  pop! for jQuery
//  v0.2 requires jQuery v1.2 or later
//  
//  Licensed under the MIT:
//  http://www.opensource.org/licenses/mit-license.php
//  
//  Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//

(function($) {

  $.pop = function(options){

    // inject html wrapper
    function initpops (){
      $(".pop").each(function() {
        var pop_classes = $(this).attr("class");        
        if ( $(this).find('.pop_menu').length) {        
            // do nothing       
        } else {
            $(this).addClass("pop_menu");       
            $(this).wrap("<div class='"+pop_classes+"'></div>");
            $(".pop_menu").attr("class", "pop_menu");
            $(this).before(" \
            <div class='pop_toggle'></div> \
            ");       
        }       

      });
    }
    initpops();

    // assign reverse z-indexes to each pop
    var totalpops = $(".pop").length + 100;
    $(".pop").each(function(i) {
    var popzindex = totalpops - i;
    $(this).css({ zIndex: popzindex });
    });

    // close pops if user clicks outside of pop
    activePop = null;
    function closeInactivePop() {
      $(".pop").each(function (i) {
        if ($(this).hasClass('active') && i!=activePop) {
          $(this).removeClass('active');
          }
      });
      return false;
    }
    $(".pop").mouseover(function() { activePop = $(".pop").index(this); });
    $(".pop").mouseout(function() { activePop = null; });

    $("body").on("click", ".pop", function(){       
     closeInactivePop();
    });
    // toggle that pop
    $("body").on("click", ".pop_toggle", function(){
      $(this).parent(".pop").toggleClass("active");
    });
  }

})(jQuery);

现在，当我在 ajax 调用上加载此脚本时，新的弹出菜单可以工作，但旧的菜单不会对 onclick 事件做出反应。

4

2 回答 2

0

你不应该弄乱插件。它的工作方式与应有的完全一样。更好地向我们展示你如何在你已经拥有的元素上调用它。

我也不喜欢这个插件。更好地使用来自JqueryUI的东西 你可以用更简单的方式做这样的事情。

[编辑] 我尝试了你的第一个代码（插件），它对我来说可以正常工作。

[编辑] 好的。我得到它。你打电话给 $.pop(); 多次。你不应该！调用 $.pop(); 将下拉菜单固定到所有具有 class="pop" 的元素。这就是为什么你有这么有趣的堆栈的原因。只需使用 $.pop(); 一次。插件无法连接在页面上动态创建的新元素。

于 2013-03-19T09:09:19.073 回答
0

从 ajax 调用中删除 pop 并在成功时调用它：

                $(".pop").each(function() {
                var pop_classes = $(this).attr("class");        
                if ( $(this).find('.pop_menu').length) {        
                // do nothing       
                } else {
                $(this).addClass("pop_menu");       
                $(this).wrap("<div class='"+pop_classes+"'></div>");
                $(".pop_menu").attr("class", "pop_menu");
                $(this).before(" \
                <div class='pop_toggle'></div> \
                ");       
                }                               
                });     
                // assign reverse z-indexes to each pop
                var totalpops = $(".pop").length + 100;
                $(".pop").each(function(i) {
                var popzindex = totalpops - i;
                $(this).css({ zIndex: popzindex });
                });     
                // close pops if user clicks outside of pop
                activePop = null;
                function closeInactivePop() {
                  $(".pop").each(function (i) {
                    if ($(this).hasClass('active') && i!=activePop) {
                      $(this).removeClass('active');
                      }
                  });
                  return false;
                }
                $(".pop").mouseover(function() { activePop = $(".pop").index(this); });
                $(".pop").mouseout(function() { activePop = null; });
于 2013-03-19T15:38:10.800 回答