JQUERY Toggle and Ajax

Question

私はメニューとサブメニューを持っています。サブメニューのコンテンツはajaxで読み込まれます。

サブメニューが切り替わります。問題は、サブメニューを隠すためにクリックすると、それでもajax呼び出しが行われることです。

メニューを開くときにクリックするだけで、どのようにajaxコールを行うことができますか？

$("#showsubmenu").live("click", function() { 
       var attrib = $(this).attr('menuid'); 

       $("#"+attrib).toggle(); 
       $("#"+attrib).html("<h4>&nbsp;&nbsp;Loading links...</h4>"); 
       $.ajax({ 
        cache: false, 
        url: "submenu.php", 
        dataType: "html", 
        data: "&menuid="+attrib, 
        success: function (data) { 
         $("#"+attrib).html(data); 
         }, 
        error: function(jqXHR, textStatus, errorThrown) { 
         alert(textStatus); 
        } 

       }); 

      }); 

Answer 1

次の時間に開いてもサブメニューが作成されると、ajaxコールを作成しないパフォーマンス上の利点とともに、この単純なソリューションを試してみてください。これがあなたに役立つことを願っています。

$("#showsubmenu").live("click", function() { 
       var attrib = $(this).attr('menuid'); 
       var $attrib = $("#"+attrib); 

       $attrib.toggle(); 

       if(!$attrib.data("subMenuPopulated") && $attrib.is(":visible")){ 

        $attrib.html("<h4>&nbsp;&nbsp;Loading links...</h4>"); 
        $.ajax({ 
        cache: false, 
        url: "submenu.php", 
        dataType: "html", 
        data: "&menuid="+attrib, 
        success: function (data) { 
         $attrib.html(data).data("subMenuPopulated", true); 
         }, 
         error: function(jqXHR, textStatus, errorThrown) { 
         alert(textStatus); 
         } 
        }); 
       } 

      }); 

Answer 2

.toggle()は、オブジェクトの可視性を変更するので、あなたはそれのCSSのdisplayプロパティに対してチェックすることができます。すでに隠されていない場合は、Ajax-Callを起動する必要はありません。

Answer 3

私は過去にクラスを追加/削除していました。

が再び行われてAjax呼び出しを防ぐために.addClass（「サブメニュー仕掛け」）を使用し、成功ハンドラで次に

if(!$(this).hasClass("submenu-loaded")) {   
    ...Ajax call 
} 

のようなテストを追加します。

Answer 4

 
if ($("#"+attrib).not(':visible')) { 
    ...run ajax code 
} 

これはちょうどそれがないならば、あなたはAjaxコードを実行することができ、サブメニューが表示されているかどうかを確認するためにチェックしています。

それとも、サブメニュー内のコードの存在を確認したい場合はあなたのような何かを行うことができます。見つからなかった場合は、

 
if ($("#"+attrib).html().length == 0) { 
    ...run ajax code 
} 

サブメニュー内の任意のHTMLのためこのコードのチェックをajaxコードを実行することができます。