JQUERY를 사용하는 앵커 태그 onclick

Question

안녕하세요 저는 앵커 태그에 onclick을 넣으려고합니다. 나는 onclick가 작동하지 않는 이유를 이해할 수 없다. 나는 jquery를 사용하고있다. 여기에 내 HTML과 자바 스크립트 코드가있다.

<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"); 
    }); 
}); 

자바 스크립트가 실행되지 않습니다. 경고는 표시되지 않습니다. 어떤 도움을 주시면 감사하겠습니다. 이 셀렉터 $(".list-unstyled a") 당신이 원하는 것을 선택하지 않기 때문에

Answer 1

당신은 다음에

$(".list-unstyled li a") 

당신의 선택을 변경해야합니다. 모든 앵커를 얻으려고합니다. 그 앵커는 클래스가 list-unstyled 인 요소의 하위 요소입니다. 선택하려고하는 앵커는 list-unstyled 인 ul의 하위 항목이 아니지만 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

왜 함수를 인라인는 앵커 태그의 온 클릭 이벤트를 호출 해달라고?

<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와/자바 스크립트 기능 :

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