Как использовать навигационную панель для запуска события?

Question

Я пытался в течение нескольких дней. Что я хочу сделать, это использовать параметры в меню навигации, которые я должен вызвать событие onload в java script/jquery. Однако события просто не срабатывают. Я попытался использовать onselect и onclick, но безрезультатно. Событие должно вносить данные в мой шаблон. Возможно, я сделаю ошибку, которую я просто не вижу. или есть еще один лучший способ сделать это?

Это моя панель навигации. Вы можете видеть функции onselect, которые я пытался использовать.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">MEK Steel</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="home.html">Home</a> 
       </li> 
       <li class="dropdown" > 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="about.html#about">About Us</a> 
         </li> 
         <li> 
          <a href="about.html#history">History</a> 
         </li> 
         <li> 
          <a href="about.html#privacyPolicy" >Privacy Policy</a> 
         </li> 
         <li> 
          <a href="about.html#termsAndConditions">Terms and Conditions</a> 
         </li> 
         <li> 
          <a href="about.html#disclaimer">Disclaimer</a> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown" class="active"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li onselect = "steelProducts()"> 
          <a href="steelProducts.html">Steel Products</a> 
         </li> 
         <li onselect = "steelDoors()"> 
          <a href="steelDoors.html">Steel Doors</a> 
         </li> 
         <li onselect="digitalSafes()"> 
          <a href="digitalSafes.html">Digital Safes</a> 
         </li > 
         <li onselect="securityEq()"> 
          <a href="securityEquipment.html">Security Equipment</a> 
         </li> 
         <li onselect="storageSol()"> 
          <a href="storageSolutions.html">Storage Solutions</a> 
         </li> 
         <li onselect="steelFur()"> 
          <a href="steelFurniture.html">Steel Furniture</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="services.html">Services</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

Это мой javascript. я написал только одну для целей тестирования

function showTemplate(template, data){ 
var html = template(data); 
console.log(html); 
$('#content').html(html); 
}  
function securityEq(){ 
source = $("#productsTemplate").html(); 
secEqTemp = Handlebars.compile(source); 
showTemplate(secEqTemp, data); 
} 

Answer 1

После того, как вы объяснили, что вы пытаетесь сделать

@Chax im пытается, чтобы onselect работал до того, как тег делает. например, я хочу загрузить данные и поместить их в свой шаблон, а затем показать страницу.

Я придумал этот код

$(document).ready(function(){ 
 
    $('a').click(function(){ // Bind a click event to my <a> tag 
 
    var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go 
 
    // Do something, your logic 
 
    
 
    
 
    window.location.href = linkValue; // Load the new page 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-link="http://www.google.com">I'm a link</a> 
 
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->

Что делает этот код прост. Мы связываем событие click с каждым тегом <a> в DOM. Когда один из наших тегов щелкнут, мы выполняем функцию. Обратите внимание, что вы можете менять кнопку с помощью switch. Затем мы вызываем объект window и вызываем вызов вызываемой нами страницы.

Answer 2

$(document).ready(function() { 
    $('a').on('click', function(){ 
    alert($(this).html()); 
    }); 
}); 

Вы должны ссылаться на якорь, а не список тегов.

Fiddle

Answer 3

проверить это jsfiddle Когда я поместить код JS внутри HTML, используя <script> это работает и события увольняют