WordpressでAjaxでjQueryスクリプトを使用する

Question

私のワードプレスサイトにはAjaxify WordPress Site (AWS)プラグインを使用しています。 また、メニューにjQueryスクリプトも使用しています。これは基本的にメニューをアニメーション化します。

(function($) { 
$(document).ready(function() { 
$('#cssmenu li.has-sub>a').on('click', function(){ 
     $(this).removeAttr('href'); 
     var element = $(this).parent('li'); 
     if (element.hasClass('open')) { 
      element.removeClass('open'); 
      element.find('li').removeClass('open'); 
      element.find('ul').slideUp(); 
     } 
     else { 
      element.addClass('open'); 
      element.children('ul').slideDown(); 
      element.siblings('li').children('ul').slideUp(); 
      element.siblings('li').removeClass('open'); 
      element.siblings('li').find('li').removeClass('open'); 
      element.siblings('li').find('ul').slideUp(); 
     } 
    }); 

    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>'); 

    (function getColor() { 
     var r, g, b; 
     var textColor = $('#cssmenu').css('color'); 
     textColor = textColor.slice(4); 
     r = textColor.slice(0, textColor.indexOf(',')); 
     textColor = textColor.slice(textColor.indexOf(' ') + 1); 
     g = textColor.slice(0, textColor.indexOf(',')); 
     textColor = textColor.slice(textColor.indexOf(' ') + 1); 
     b = textColor.slice(0, textColor.indexOf(')')); 
     var l = rgbToHsl(r, g, b); 
     if (l > 0.7) { 
      $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)'); 
      $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)'); 
     } 
     else 
     { 
      $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)'); 
      $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)'); 
     } 
    })(); 

    function rgbToHsl(r, g, b) { 
     r /= 255, g /= 255, b /= 255; 
     var max = Math.max(r, g, b), min = Math.min(r, g, b); 
     var h, s, l = (max + min)/2; 

     if(max == min){ 
      h = s = 0; 
     } 
     else { 
      var d = max - min; 
      s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
      switch(max){ 
       case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
       case g: h = (b - r)/d + 2; break; 
       case b: h = (r - g)/d + 4; break; 
      } 
      h /= 6; 
     } 
     return l; 
    } 
}); 
})(jQuery); 

AWSプラグインがアクティブな場合、メニュースクリプトは機能しません。メニューはサイトが読み込まれたときに正常に機能しますが、記事を入力すると（ajaxifyプラグインが有効になっている）メニュースクリプトが機能しなくなります。なぜ私は分からない。私は$(document).ready(function() {の代わりに $(document).ajaxComplete(function(){を使用しようとしましたが、これはajaxが最初に読み込まれた場合にのみ機能します（言い換えれば、最初にメニューを動作させるために記事を入力する必要があります）。だから、私は選択肢から外れているようだ。

ajaxがトリガーされる前と後の両方でスクリプトを動作させるにはどうすればよいですか？ また、ajaxがロードされたらjQueryスクリプトを再トリガする方法はありますか？

ここのテスト例：http://testsite.seyoum.net/ これはテストサイトであるため、メニューのリンクの一部が機能しません。 「マークアップ」と「未発表の」..

Answer 1

代わり

$('#cssmenu li.has-sub>a').on('click', function(){...}); 

の仕事はあなたがAJAXでロードされたコンテンツを持っている場合は

$(document).on('click', '#cssmenu li.has-sub>a', function(){...}); 

てみないと、あなたがする必要がある場合この新しい要素をクリックして何らかのスクリプトをプリフォームする場合は、documentオブジェクト全体をクリックイベントとして監視する必要があります。代わりに、クリックイベントのためにコンテンツが読み込まれたコンテナを見ることができます。それは理論的にはうまくいくはずです...