JQuery에서 anchor 태그에 대한 e.preventDefault() 적용되지 않습니다.

[namwooo]

JQuery, Ajax를 사용하여 네비게이션 바 클릭 이벤트가 발생 했을 경우, 해당 html 파일을 로드 해주려 합니다.

nav.js
$(document).ready(function() { $('.header-nav').on('click', 'a', function(e){ e.preventDefault(); var url = this.href; callPage(url); });

하지만 해당 이벤트 타겟에 대한 preventDefault() 메소드가 적용되지않고 계속 href 주소로 링크가 됩니다.

header.html
<div class="header-nav col s6"> <ul class="nav right"> <li><a href="" class="mr20">HOW IT WORKS</a></li> <li><a href="" class="mr20">Inbox</a></li> <li><a href="signin.html" class="mr20">Sign in</a></li> </ul> </div>

구글링 해봤지만 해결책을 찾을 수 없었어요 ㅜㅜ

[ghdalsrldi]

nav.js 파일에 $(document).ready 메소드가 닫히지 않았어요
뒤에 })를 추가해 주시면 될 것 같아요

$(document).ready(function() { $('.header-nav').on('click', 'a', function(e){ e.preventDefault(); var url = this.href; callPage(url); 
});

[namwooo]

메소드는 닫혀있어요.
혹시 구체적으로 ajax요청해서 로드한 element들에 바로 event listener를 붙일 수 있나요?