jQuery click event on link won't get catched in vaniila JS

Question

I am using the following Vanilla binding in order to simulate the jQuery delegation event:

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

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

It is all working fine except when I try to trigger with jQuery a click event on a link element <a href="#">. Then it won't work at all. The vanilla click event handler won't be triggered.

Reproduction working on <b> element

$('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>

Instead, if I replace the link element for a bold one <b> it works as expected. What's going on? Reproduction not working on <a> element

$('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>

And no, I do not want to use [0] like this:

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

I want it to fire normally:

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

Are you saying that `$(document).on('keydown', function(){` does not trigger the click? — Huangism, May 03 '18 at 14:45
@Huangism nop, this is what is not being captured by vanilla `$('li').find('a').trigger('click');`. I've updated the question to be more clear. — Alvaro, May 03 '18 at 14:47
@Alvaro yes that's what I am asking, you would have to bind the click with jquery for that to trigger it. Test here https://jsfiddle.net/s3q2q38z/5/ — Huangism, May 03 '18 at 14:48
@Huangism can you then explain why it works properly when using the `b` element instead of the `a` one in `$('li').find('a').trigger('click');` — Alvaro, May 03 '18 at 14:49
@Alvaro in detail no, but I would imagine it is because `b` is not a naturally clickable element — Huangism, May 03 '18 at 14:52
@Alvaro console.log a `` element and a `` element - they may return differently which is why you'd need (I say need, there might be other ways around it) the `[0]` — treyBake, May 03 '18 at 14:55
@Huangism trying to find an explanation to this, and hopefully, a solution. — Alvaro, May 03 '18 at 15:00
I have seen other questions but none of them explains the behaviour, I think we need to dig into the library itself to figure out why. You could bind the click to the `li` and it would trigger the click for now. Until I have a better explanation for this, I deleted my answer for now — Huangism, May 03 '18 at 15:11
Possible duplicate of [Listen for jQuery Event With Vanilla JS](https://stackoverflow.com/questions/40915156/listen-for-jquery-event-with-vanilla-js). jQuery provides a layer of abstraction above native JS events, which means you cannot listen to jQuery events using vanilla JS. — Terry, May 03 '18 at 15:36
Not a duplicate, the other question is reverse of this, like reverse flash — Huangism, May 03 '18 at 15:51
Is this what you're hoping for: [JS Fiddle](https://jsfiddle.net/davidThomas/s3q2q38z/6/)? (Admittedly using `each()` in this way is - basically - a little icky, but it does provide access to the `this` element-node). — David Thomas, May 03 '18 at 15:57

score 2 · Accepted Answer · answered May 03 '18 at 15:36

2

Unfortunately, you cannot trigger native click handlers in jQuery on links, it is disabled in the source and a comment says "For cross-browser consistency, don't fire native .click() on links".

So, you will either have to bind the document click handler using jQuery $(document).on("click") or call the nodes clickHandler directly $('li').find('a')[0].click();

answered May 03 '18 at 15:36

Joschi

2,874
1
18
23

Yep as expected the source simply don't allow it, probably for security reasons but I believe this is the right answer – Huangism May 03 '18 at 15:43
You could also trigger click on the `li` and it would work as well – Huangism May 03 '18 at 15:50
1

Interesting. I attached an onclick (i.e. the old way in plain JS) to the document and [it did fire](https://jsfiddle.net/s3q2q38z/7/). – Vasan May 03 '18 at 15:57

jQuery click event on link won't get catched in vaniila JS

1 Answers1