I am not familiar with javascript and facing this weird situation.
I am using javascript to iterate over div element and retrieve href
values from all <a>
element inside, the purpose is to handle click on <a>
element by JavaScript instead of default by HTML.
The iteration works but all links target replaced to the last <a>
href
values.
$(document).ready(function() {
//NavMenu();
//NavActive();
NavClick();
console.log('tes');
});
function NavClick() {
var nav_item = document.getElementById('nav-menu').querySelectorAll('div')
for (let i = 0; i < nav_item.length; i++) {
item = nav_item[i].querySelector('a').getAttribute('href')
nav_item[i].addEventListener('click', function(e) {
e.preventDefault();
$.ajax({
url: item,
contentType: 'application/json',
dataType: 'json',
success: function(data) {
$('title').html(data.title)
window.history.replaceState({}, '', item)
$('#content').html(data.data)
}
});
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row col-12 justify-content-end" id="nav-menu">
<div class="col-auto">
<a href="/" class="px-1">
Short
</a>
</div>
<div class="col-auto">
<a href="/myurl/' %}" class="px-1">
My URL
</a>
</div>
<div class="col-auto">
<a href="/group/" class="px-1">
My Collection
</a>
</div>
<div class="col-auto">
<a href="/group/create/" class="px-1">
New Collection
</a>
</div>
</div>
What I expecting is my code will add event listener to each element and retrieve the “href” value so I can send request to server with the url.
eg. when I click this link, javascripts will send request to 127.0.0.1
but what i get is request send to 127.0.0.1/group/create/
.
<div class="col-auto">
<a href="/" class="px-1">
Short
</a>
</div>
is my logics wrong or I miss something on my codes?