需要修改这个jquery弹出菜单脚本与ajax工作

need to modify this jquery pop menu script to work with ajax

本文关键字:脚本 菜单 ajax 工作 修改 jquery      更新时间:2023-09-26

我使用的脚本来自: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事件。

你不应该乱动插件。它就像它应该的那样工作。最好向我们展示如何在已有的元素上调用该方法。

我也不喜欢这个插件。最好使用来自JqueryUI的东西你可以用简单得多的方法做这件事。

[编辑]我尝试了你的第一个代码(插件),它对我来说工作正确。

[编辑]好的。我明白了。调用$.pop();很多次了。你不应该!调用.pop美元();将下拉菜单固定到所有class="pop"的元素上。这就是为什么你有这么有趣的堆栈的原因。只需使用$.pop();一次。插件不提供连接页面上动态创建的新元素的能力。

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