Click事件不使用文件的導入JQuery的

我有一個名爲此示例中有工作在進口Click事件不使用文件的導入JQuery的

<!-- Navigation --> 
<div class="navbar-inner"> 
    <div class="container"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <!-- This is the section that doesn't work --> 
     <a class="brand" href="#" data-target=".pe-container">The Book Cover</a> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li> 
        <a href="#" data-target=".section-about">About</a> 
       </li> 
       <li class="divider-vertical"></li> 
       <li> 
        <a href="#" data-target=".section-books">Books</a> 
       </li> 
       <li class="divider-vertical"></li> 
       <li> 
        <a href="#" data-target=".section-blog">Blog</a> 
       </li> 
       <li class="divider-vertical"></li> 
       <li> 
        <a href="#" data-target=".section-contact">Contact</a> 
       </li> 
       <li class="navigation-right"><a href="#" title="Follow us on Twitter" target="_blank"><i class="sprite sprite-twitter"></i></a></li> 
       <li class="navigation-right"><a href="#" title="Follow us on Facebook" target="_blank" class="facebook"><i class="sprite sprite-facebook"></i></a></li> 
       <li class="navigation-right"><a href="#" title="Follow us on Google+" target="_blank" class="google"><i class="sprite sprite-google"></i></a></li> 
      </ul> 

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

然後索引頁我有這樣的：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- Load the Metatag Files Partial --> 
     <link rel="import" href="partials/metatags.html" /> 
     <!-- Load the CSS Files Partial --> 
     <link rel="import" href="partials/css-files.html" /> 
     <!-- Load the JS Files Partial --> 
     <link rel="import" href="partials/js-files.html" /> 
     <title>Title Goes here/title> 
    </head> 
    <body id="page"> 
     <div id="container" class="contain"> 
      <!-- Navigation --> 
      <div id="navBarMain" class="navbar navbar-inverse navbar-fixed-top"></div> 
      <!-- End Navigation --> 
     </div> 
    </body> 
</html>

最後JQuery的加載在div ...

// JQUery Fancy Box 
$(document).ready(function() { 

    //Load Imports 
    //Navigation 
    $("#navBarMain").load("imports/navigation.html"); 

    //This is the menu system 
    $(function() { 
     $('.nav a, .brand, a[data-target]').click(function() { //This is what's not working 
      $('html, body').animate({ 
       scrollTop: $($(this).attr('data-target')).offset().top - 50 
      }, 500); 
     }); 
    }); 
});

問題是，當我將「navigation.html」文件放回索引頁的div中時，頁面頂部的菜單起作用。但是，當我加載「navigation.html」頁面時，菜單單擊事件不起作用。我知道有一個電話是錯誤的，所以如果你能提供幫助，將不勝感激。注意：即使有斷點，控制檯中也沒有Javascript錯誤，沒有任何反應。該代碼加載最初並在斷點處停止，但是當我點擊菜單上的，沒什麼，虛無縹緲，ziltch ....

來源

2014-09-04 Peter The Angular Dude

嘗試連接該事件的.load回調函數：

$(function() { 
    $("#navBarMain").load("imports/navigation.html", function() { 
     $('.nav a, .brand, a[data-target]').click(function() { //This is what's not working 
      $('html, body').animate({ 
       scrollTop: $($(this).attr('data-target')).offset().top - 50 
      }, 500); 
     }); 
    }); 
});

來源

2014-09-04 16:31:45 Stryner

謝謝...很簡單。就像一個魔術。最受讚賞 – 2014-09-04 17:31:44

Click事件不使用文件的導入JQuery的

回答

相關問題