This question already has answers here:
</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding" dir="ltr">Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)</a>
<span class="question-originals-answer-count">
(5 answers)
</span>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/20279484/how-to-access-the-correct-this-inside-a-callback" dir="ltr">How to access the correct `this` inside a callback?</a>
<span class="question-originals-answer-count">
(10 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2018-07-18 03:46:34Z" class="relativetime">2 years ago</span>.</div>
</div>
</aside>
I am using ajax to redirect pages without refreshing for a tags. However, it randomly works. Sometimes, it doesnt even generate log that I put inside the function on purpose to check if its called. I guess a tag performs href that is already declared on inline. How do I make this 100% work?
$(".view-about-us a").on('click', event=>{
event.preventDefault();
var new_url = $(this).attr("href");
$.ajax({
dataType: 'html',
type: "POST",
url: new_url,
data: {
},
success: function(result) {
window.history.pushState(null, null, new_url);
var htmlString = result;
var parser = new DOMParser();
var doc = parser.parseFromString(htmlString, "text/html");
var parent = doc.querySelector(".main-container");
var children = parent.childNodes;
children.forEach(child => console.log(child));
$(".main-container").html(children);
},
error: function(result) {
alert('error');
}
});
});
</div>