jQuery slideDownは動的に割り当てられたIDを持つ要素では機能しません

Question

EDIT：コードを少しきれいにして問題を絞りました。

私はWordpressサイトで作業しています。携帯のメニューにドロップダウンを組み込もうとしています。つまり、既存の要素にクラスとIDを割り当てるためにjQueryを使用する必要があります。私はこのコードが既にpremade HTMLで動作しますが、動的に作成されたIDで失敗します。ここで

コードです：

... 
var menuCount = 0; 
var contentCount = 0; 
//find the mobile menu items 
var submenus = $('[title="submenu"]'); 
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) { 
    console.log(submenus); 
    submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>'); 
    submenus.each(function() { 
     $(this).attr("href", "#m" + menuCount++); 
    }) 
    var content = submenus.parent().find('ul.sub-menu'); 
    content.addClass('dropdown-content'); 
    content.each(function() { 
     $(this).attr("id", "m" + contentCount++); 
    }) 
} 

$(document).on('click', '.dropdown-title', function(e) { 
    var currentAttrValue = $(this).attr('href'); 

    if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) { 
     $(this).removeClass('d-active'); 
     $(currentAttrValue).slideUp(300).removeClass('d-open'); 
    } else { 
     $('.dropdown-title').removeClass('d-active'); 
     $('.dropdown-content').slideUp(300).removeClass('d-open'); 
     $(this).addClass('d-active'); 
     console.log($(currentAttrValue)); 

     //THIS LINE FAILS 
     $(currentAttrValue).slideDown(300).addClass('d-open'); 
    } 

    e.preventDefault(); 

}); 

私は$(document).on(...)を使用して、クラスdropdown-titleを持つ要素を登録しましたが、私は、カスタムID年代に要素を登録するために何をする必要があるかを把握することはできません。私はイベントコールバックを.eachの関数の中に入れようとしましたが、私はトリガするカスタムイベントを作ろうとしましたが、それらのどれもが2番目のコード行をトリガすることはありません。そこコンソールにはエラーはません、と私は、この取得セレクタログイン慰めるとき：

[UL＃m0.sub-menu.dropdownコンテンツ、コンテキスト：ドキュメント、セレクタ： "＃1 M0"] を： UL＃1 m0.sub-menu.dropdownコンテンツ コンテキスト： 文書 長さ： 1セレクタ ： "＃1 M0" プロト ： オブジェクト[0]

jQueryはその要素があることを知っていますが、登録方法を理解できません。あるいは、私が考えていないことかもしれません。わかりません。

Answer 1

要素を動的に作成する場合は、要素を作成した後に.onの「クリック」を割り当てる必要があります。ページが読み込まれる代わりにIDとクラスを追加した後に投稿した 'クリック時の'コールバックコードを宣言するだけで、.dropdown-titleクラスの要素にアタッチされます。

チェックこのjsFiddle：https://jsfiddle.net/6zayouxc/

EDIT：編集したJSコードは動作します...またあなたのHTMLやCSSといくつかの問題がある可能性がありますが、あなたはあなたのサブメニューを隠していますか？それらを透明にしていないことを確認してください。

Answer 2

要素の代わりに属性の関数を呼び出そうとしています。 $(this).slideDown(300).addClass('d-active');が必要です（前に$(this).addClass('d-active');は必要ありません）。

Answer 3

内側submenus.eachループにコールバックリスナーを追加します。

クラスdropdown-titleを動的に追加しているため、DOMロード時には利用できませんでした。そのため、イベントリスナーはこれらのelemntに関連付けられていませんでした。

var menuCount = 0; 
var contentCount = 0; 
//find the mobile menu items 
var submenus = $('[title="submenu"]'); 
if (submenus.length && submenus.parent('.fusion-mobile-nav-item')) { 
    console.log(submenus); 
    submenus.addClass('dropdown-title').append('<i id="dropdown-angle" class="fa fa-angle-down" aria-hidden="true"></i>'); 
    submenus.each(function() { 
     $(this).attr("href", "#m" + menuCount++); 

     // add callback here 
     $(this).click(function(e) { 
      var currentAttrValue = $(this).attr('href'); 

      if ($(e.target).is('.d-active') || $(e.target).parent('.dropdown-title').is('.d-active')) { 
       $(this).removeClass('d-active'); 
       $(currentAttrValue).slideUp(300).removeClass('d-open'); 
      } else { 
       $('.dropdown-title').removeClass('d-active'); 
       $('.dropdown-content').slideUp(300).removeClass('d-open'); 
       $(this).addClass('d-active'); 
       console.log($(currentAttrValue)); 

       $(currentAttrValue).slideDown(300).addClass('d-active'); 
      } 

      e.preventDefault(); 

     }); 


    }) 
    var content = submenus.parent().find('ul.sub-menu'); 
    content.addClass('dropdown-content'); 
    content.each(function() { 
     $(this).attr("id", "m" + contentCount++); 
    }) 
} 

Answer 4

私の問題は、jQueryのモバイルメニューと私はjQueryのに見つかっ一つだそのIDを検索したときにデスクトップメニューが最初にロードされているデスクトップメニュー、両方に追加されていることであるが判明。だから私の疑惑については完全に間違っていたことが判明しました。