L'événement de clic jQuery sur un lien n'est pas pris en compte par vaniila JS

Question

J'utilise la liaison Vanilla suivante afin de simuler l'événement de délégation de jQuery :

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);

    //here's where I would filter by target
});

Tout fonctionne bien, sauf lorsque j'essaie de déclencher avec jQuery un événement de clic sur un élément de lien. <a href="#"> . Dans ce cas, cela ne fonctionnera pas du tout. Le gestionnaire d'événement de clic vanille ne sera pas déclenché.

Reproduction en cours <b> élément

$('button').click(function() {
    $('ul').append('<li><b>New</b></li>');
});

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);
});

$(document).on('keydown', function(){
    console.warn("-------Trigger--------")
    $('li').find('b').trigger('click');
});

div{
    background: yellow;
    padding:10px 20px;
    border: 1px solid #ccc;
    margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add element</button>
<span id="trigger">Trigger</span>
<div>
 Just focus the white panel and press any key. That will trigger the jQuery.click() event as you can see in the code.
</div>
<ul>
    <li>Old element</li>
    <li>Old element</li>
    <li><b>Old element</b></li>
</ul>

Au lieu de cela, si je remplace l'élément de lien par un élément en gras <b> il fonctionne comme prévu. Qu'est-ce qui se passe ? La reproduction ne fonctionne pas sur <a> élément

$('button').click(function() {
    $('ul').append('<li><a href="#">New</a></li>');
});

document.addEventListener('click', function(e) {
    console.log("some element was clicked");
    console.log(e.target);
});

$(document).on('keydown', function(){
    console.warn("-------Trigger--------")
    $('li').find('a').trigger('click');
});

div{
    background: yellow;
    padding:10px 20px;
    border: 1px solid #ccc;
    margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add element</button>
<span id="trigger">Trigger</span>
<div>
 Just focus the white panel and press any key. That will trigger the jQuery.click() event as you can see in the code.
</div>
<ul>
    <li>Old element</li>
    <li>Old element</li>
    <li><a href="#">Old element</a></li>
</ul>

Et non, je ne veux pas utiliser [0] comme ça :

$('li').find('a')[0].click();

Je veux qu'il tire normalement :

$('li').find('a').click();