0

At the moment the only thing, which makes me load ~100kb jQuery library are these 3 lines of code:

$(document).on('click', ".js-ya-share2-button", function() {
    this.parentElement.querySelector('.ya-share2__item_more').click();
});

How to reproduce the full functionality of without jQuery?

The code above allows to "attach" a function to elements, which hasn't been loaded yet. For example, to elements, which are loaded only when user scrolls the page down. How to make it with pure JavaScript?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
klm123
  • 12,105
  • 14
  • 57
  • 95
  • 1
    https://stackoverflow.com/a/27373951/215552 – Heretic Monkey Oct 27 '21 at 21:08
  • 3
    Does this answer your question? [Emulate jQuery "on" with selector in pure Javascript](https://stackoverflow.com/questions/14677019/emulate-jquery-on-with-selector-in-pure-javascript) – bigless Oct 27 '21 at 21:08
  • @Trincot Both the duplicates marked are really outdated. Don't you think it's worth either finding a relevant current duplicate, or giving a 2021 answer? – connexo Oct 27 '21 at 21:21
  • 1
    Sure, please go ahead. The 2021 answer should then be given to the duplicate reference, not here. – trincot Oct 27 '21 at 21:22
  • I disagree, it would take years until that answer effectively surfaces on that duplicate. – connexo Oct 27 '21 at 21:24
  • @connexo Your answer is pretty much the same as the top voted answer on the dupe you removed (call `closest()` with the prefered selector, and do something with it. I agree with @bigless and @trincot that this question should be closed as a dupe. – g00glen00b Oct 27 '21 at 21:35
  • @g00glen00b In essence that top voted answer does use the same approach on the inside, but makes this harder to spot by wrappping and thus, effectively disguising, it in a `function` (which is explicitly not what OP asked for, since they are not looking for a `function` that does the same, but rather the outright analog JS code). – connexo Oct 27 '21 at 21:41
  • @g00glen00b On top of that, that function isn't even particularly carefully crafted, as the delegate does not need to be the `parent`, but rather any *ancestor*. As such, I consider the answer even harmful as it suggests a misleading delegate/desired target relationship that does not precisely depict the requirements for delegate listening. Especially in the example OP is looking for a Vanilla JS replacement for, this delegate is the `document`, which to no element is a `parent`. Please reconsider your close vote. – connexo Oct 27 '21 at 21:45
  • @klm Are you looking for a function that offers the same options and functionality as `$(selector).on()` (which your title suggests), or are you looking for an exact replacement of that jQuery code you've shown (which your question details ask for)? – connexo Oct 27 '21 at 21:51
  • @connexo, the 3-line code replacement is mandatory for me, and the same options and functionality of .on() function is optional for me, it's just my desire to educate myself. – klm123 Oct 28 '21 at 07:00
  • @bigless, that question only has answers for specific op situation (child-parent), not mine (element does not exist at the moment event listenter is attached), doesn't it? – klm123 Oct 28 '21 at 07:25
  • @klm123 You should mention existing thread(s)with note that you didn't find answer there. Generally, this is just a extended usecase and relevant answer should be placed in orig thread. It's nightmare to find answer to generic question when answers are spread across 10 dups.. – bigless Oct 28 '21 at 11:18

1 Answers1

0

This imo would be the exact analogy in vanilla JS:

document.addEventListener('click', function(event) {
    const desiredTargetElement = event.target.closest('.js-ya-share2-button'); 
    if (desiredTargetElement)
        desiredTargetElement.parentElement.querySelector('.ya-share2__item_more').click();
});

The reason we need to work with closest here rather than checking if the event target has the desired class is that you can have scenarios where the clicked element is actually a descendant of the element you're looking out for.

closest(selector), if called on the element that already matches the desired selector, will return the element itself.

connexo
  • 53,704
  • 14
  • 91
  • 128
  • This solution was already present in the duplicate target, and it would fail if the delegatedTarget was itself a descendant of a `.js-ya-share2-button` and you clicked somewhere else in that delegatedTarget (I already told you so a couple of days ago) – Kaiido Oct 27 '21 at 23:16
  • @Kaiido A child of `desiredTargetElement` cannot act as a delegate, neither in vanilla JS, nor in jQuery, for clicks on `desiredTargetElement`, as the event will never pass by the delegate in that case unless it's a child of the delegate, or the delegate itself (in that case it wouldn't even be anything useful to try delegate listening). Also, please add reference to the question your "told your a couple days ago" comment occured on. – connexo Oct 27 '21 at 23:18
  • I talked about the case where delegatedTarget is itself a descendant of an other element matching your selector. For instance `
    unrelatedexpected
    ` clicking on "unrelated", your script would fail, as it would target the parent div where it should have stopped at #delegated. As for the previous conversation, I'm sorry I got confused with an other user with whom we discussed this exact same and where I produced https://jsfiddle.net/6dz491gq/ I apologize for my bad memory.     – Kaiido Oct 27 '21 at 23:57
  • I don't know who downvoted this, but unlike "the duplicate" answers, this works for me. It's a perfect combination of child problem solution and postponed elements creation problem solution, which I haven't found anywhere else. – klm123 Oct 28 '21 at 07:39