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

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 に答える
0

プラグインをいじってはいけません。それは本来あるべきように正確に機能します。すでに持っている要素でこれをどのように呼び出すかを示してください。

また、私はこのプラグインが好きではありません。JqueryUIから何かを使用することをお勧め します。そのようなことは、はるかに簡単な方法で行うことができます。

[編集] 最初のコード (プラグイン) を試してみましたが、正しく動作します。

[編集] わかりました。わかった。$.pop(); を呼び出します。複数回。あなたはすべきではありません！$.pop(); の呼び出し class="pop" を持つすべての要素にドロップダウン メニューを固定します。これが、面白いスタックを持っている理由です。$.pop(); を使用するだけです。一度。プラグインは、ページ上で動的に作成された新しい要素を接続する機能を提供しません。

于 2013-03-19T09:09:19.073 に答える