Якорный тег onclick с использованием JQUERY

Question

Привет Я пытаюсь установить onclick на свой якорный тег. Я не могу понять, почему onclick не работает. Я использую jquery. Вот мой код HTML и Javascript.

<div class="well"> 
    <h4>Blog Categories</h4> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <ul class="list-unstyled"> 
       <li> 
        <a href="" >Videos</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

$(document).ready(function(){ 
    $(".list-unstyled a").click(function(event){ 
     event.preventDefault(); 

     alert("You clicked on me"); 
    }); 
}); 

javascript не выполняет. Предупреждение никогда не отображается. Любая помощь будет оценена по достоинству.

Answer 1

Вы должны изменить свой селектор в дальнейшем

$(".list-unstyled li a") 

, поскольку этот селектор $(".list-unstyled a") не выбрать, что вы хотите. Вы пытаетесь получить все якоря, которые являются дочерними элементами элементов, которые имеют класс list-unstyled. Якорь, который вы пытаетесь выбрать, - это не дети ul с классом list-unstyled, но это дети li, что является дочерью этого ul.

$(document).ready(function(){ 
 
    $(".list-unstyled li a").click(function(event){ 
 

 
     alert("You clicked on me"); 
 
     
 
     event.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="well"> 
 
    <h4>Blog Categories</h4> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <ul class="list-unstyled"> 
 
       <li> 
 
        <a href="" >Videos</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Почему бы вам не вызвать функцию инлайн OnClick событие тега привязки?

<div class="well"> 
<h4>Blog Categories</h4> 
<div class="row"> 
    <div class="col-lg-6"> 
     <ul class="list-unstyled"> 
      <li> 
       <a onclick="clickingFunction()" href="" >Videos</a> 
      </li> 
     </ul> 
    </div> 
</div> 

JQuery/функция JavaScript:

function clickingFunction() 
    { 
    alert("You clicked on me"); 
    }