[NOT YET Solved] e.stopImmediatePropagation(); e.stopPropagation(); is not working at a popup router

Questions
1

I have this structure below,

<a href="/popup/ticket/confirm/" class="link">
<div class="card">
<div class="card-content">
<div class="pin-heart">
<i class="fal fa-heart"></i>
</div>
…
</div>
</div>
</a>

and the ‘a’ tag is a router to open as a popup.

Then, I have this js code below too. cause’ I don’t want to open the popup when the ‘pin-heart’ tag is clicked.

$$(document).on(‘click’, ‘.pin-heart’, function(e) {
e.stopImmediatePropagation();
e.stopPropagation();
console.log(‘aa’);
}, true);

but, still the popup is opened.

help me, plzzzzz.

what should I do?

2

As you define your click handler on ‘document’, the event is already propagated up the DOM. I think you should bind the handler directly on the .pin-heart element:

$$('.pin-heart').on(‘click’, function(e) {
  e.stopPropagation();
  ...
}
3

@Tim, Thanks for your answer. but it still doesn’t work.