Question

我使用的是来自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事件做出反应。

Answer 1

你不应该搞乱这个插件。它的工作原理与应有的完全相同最好向我们展示你如何在你已经拥有的元素上调用它。

我也不喜欢这个插件。更好地使用JqueryUI中的内容你可以用更简单的方式做这件事。

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

[编辑] 好。我知道了。你叫$ .pop（）;多次。你不应该！调用$ .pop（）;将下拉菜单固定到所有具有class =“pop”的元素。这就是为什么你有这么有趣的堆栈的原因。只需使用$ .pop（）;一旦。插件无法连接在页面上动态创建的NEW元素。

Answer 2

从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; });

需要修改此jquery弹出菜单脚本以使用ajax

2 个答案: