div内にインクルードした後にドロップダウンメニューが表示されない

-1

私のホームページにドロップダウンメニューのヘッダーがありますが、ヘッダーdivを別のhtmlファイルに入れた後、jquery load関数ドロップダウンメニューが機能していないdiv内にインクルードした後にドロップダウンメニューが表示されない

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/> 
<link rel="stylesheet" type="text/css" href="css/component.css" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
</head> 
    <body> 
     <div id="myid"> 

     </div> 
<script> 
    $(function(){ 
     $("#myid").load("header.html"); 
    }); 
    </script> 


    <script src="js/cbpHorizontalMenu.js"></script> 
    <script> 
      $(function() { 
       cbpHorizontalMenu.init(); 
       cbpHorizontalMenu1.init(); 
      }); 
     </script> 


</body> 
</html>

*****ヘッダーの内容*****

<header class="header"> 
      <div class="layout"> 
       <div class="top-header"> 

         <div class="top-right">       
          <div class="nav-toggler"> 
           <button class="toggle-link hidden-bar-opener" data-pixel=".top-menu">Top Menu</button> 
          </div> 

          <div class="layout">        
          <div class="top-menu cbp-hrmenu1">       
           <ul> 
            <li><a href="#"><span class="fa fa-plus"></span> Our Services</a> 
             <div class="service-drop cbp-hrsub"> 
              <div class="cbp-hrsub-inner">            
                <ul> 
                 <li><a href="#">football</a></li> 
                 <li><a href="#">cricket</a></li> 
                 <li><a href="#">hockey</a></li> 
                </ul> 
              </div>        
             </div>        
            </li>        



            <li> 
             <a href="#"><span class="fa fa-plus"></span> Contact Us</a>         
             <div class="service-drop cbp-hrsub"> 
              <div class="cbp-hrsub-inner"> 
               <ul> 
                <li><a href="#"><i class="fa fa-phone-square" aria-hidden="true"></i> +91-99863355333</a></li> 
                <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i> +91-124382428</a></li> 
                <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i> skype</a></li> 
                <li><a href="#"><i class="fa fa-envelope" aria-hidden="true">mail me </i></a></li> 
               </ul> 
              </div> 
             </div> 
            </li> 
           </ul> 

          </div> 
          </div> 
         </div> 


       </div>   

      </div>   

      <div class="main-menu"> 
       <div class="layout"> 

       <div class="nav-toggler"> 
         <button class="toggle-link hidden-bar-opener" data-pixel=".main-menu1"><i class="fa fa-bars"></i></button> 
       </div> 
       <nav class="main-menu1 cbp-hrmenu"> 
        <ul> 



         <li> 
          <a href="#">Category one</a> 
          <div class="cbp-hrsub"> 
           <div class="cbp-hrsub-inner"> 
            <div> 

             <ul> 
              <li><a href="#">test </a></li> 
              <li><a href="#">test </a></li> 
              <li><a href="#">test </a></li> 

              <li><a href="#">test </a></li> 
              <li><a href="#">test</a></li> 
             </ul> 
            </div> 


           </div><!-- /cbp-hrsub-inner --> 
          </div><!-- /cbp-hrsub --> 
         </li> 

         <li> 
          <a href="#">Category two</a> 
          <div class="cbp-hrsub"> 
           <div class="cbp-hrsub-inner"> 
            <div> 

             <ul> 
              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 

              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 
             </ul> 
            </div> 


           </div><!-- /cbp-hrsub-inner --> 
          </div><!-- /cbp-hrsub --> 
         </li> 




        </ul> 
       </nav> 
       </div> 
      </div> 

</header>

それが正常に動作しているよりも、私はdiv要素のヘッダの内容をコピーする場合。しかし私は私のサイトのすべてのページにそれを含めたいと思う。ここで

は、コンテンツが非同期でロードされ、あなたはそれがDOMにあります前に、メニューを初期化しようとしているため、問題があるhttp://plnkr.co/edit/51vGFoI7aJF1HUE3Wim9

出典

2016-08-05 Harsh sachdev

フィドルのほうが良いでしょう –

フィドルまたはコードペインでコードを追加してみてください。おめでとうございます！ – vignesh

実際の例です。代わりに、load()のコールバックに初期化を入れる必要があります。これを試してみてください：

<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/> 
    <link rel="stylesheet" type="text/css" href="css/component.css" /> 

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
    <script src="js/cbpHorizontalMenu.js"></script> 
    <script> 
     $(function(){ 
      $("#myid").load("header.html", function() { 
       cbpHorizontalMenu.init(); 
       cbpHorizontalMenu1.init(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="myid"></div> 
</body>

出典

2016-08-05 11:08:57

コメントありがとうございます。プランナーリンクが追加されました。 –

残念ながら、これは私のために働いていません。 –

それはPHPでいた場合、あなたはheader.phpの

2.thenと同じように名前を付けることができ<? include('header.php'); ?> それを含めることは、あなたがしたいのdivどこトップにコード行を置きますか、

出典

2016-08-05 11:10:20 LecheDeCrema

いいえ、それはPHPではありません。このサイトはangularJSにありますが、ここでは単純なJqueryを使用しています –

div内にインクルードした後にドロップダウンメニューが表示されない

答えて

関連する問題