Ajax on Click事件[重复]

                </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>