Bootstrap 4 Popover Javascript after showing

Question

I have a popover on a link, initialized via JavaScript. In the popover itself, there is a link that call a function. But when clicking the link inside popover, nothing happens. Any idea? I can't find answers about this.

The link and the popover content:

<a tabindex="0" href="#" role="button" class="remove-item-toggle">Remove</a>
<div id="remove-item-content" style="display: none;">
    <a href="#" class="remove-item">Confirm remove</a>
</div>

The JavaScript:

$('.remove-item-toggle').popover({
    toggle: 'popover',
    trigger: 'click',
    html: true,
    placement: 'top',
    content: $('#remove-item-content').html(),
});

$('.remove-item').on('click', function () {
    // ---- nothing happens here, it's not fired ----
});

Answer 1

The click handler should be assigned once the popover is shown...

$('.remove-item-toggle').on('shown.bs.popover', function () {
     $('.remove-item').on('click', function () {
        console.log("works");
    });
})

https://www.codeply.com/go/daHrZxaK9v