0

I have Bootstrap 4 popovers added dynamically to a table.

I initialize my popover like this:

// Initialize popover
$('body').popover({
    html: true,
    template:
        '<div class="popover popover-row-field" role="tooltip">' +
        '<div class="arrow"></div>' +
        '<button type="button" class="btn-popover-header btn-edit-popover-close float-right text-primary" aria-label="Close">' +
        '<i class="fal fa-check"></i>' +
        '</button>' +
        '<button type="button" data-action="undo" class="btn-popover-header action-button text-primary float-right">' +
        '<i class="fal fa-undo"></i>' +
        '</button>' +
        '<h3 class="popover-header"></h3>' +
        '<div class="popover-body"></div>' +
        '</div>',
    placement: 'bottom',
    trigger:'click',
    position: 'relative',
    selector: '.btn-edit-cell',
});

I have an event listener for a close button on the popover:

// Close popover by clicking the X
$(document).on('click', '.btn-edit-popover-close', function() {
    $('.btn-edit-cell').popover('hide').popover();
});

I then clone a template row and add it to the table:

<td class="field-editor-input align-top">
    <button type="button" class="btn-popover-header text-light btn-edit-cell save-btn-group" data-link="{{ $col->header }}-new"
            data-html="true" title="{{ pretty_heading($col->header) }}" data-row-id="#row-template-new"
            data-content="<textarea id='text-{{ $col->header }}-new' name='{{ $col->header }}' class='form-control popover-edit-field'></textarea>">
        <i class="fal fa-pen text-light"> </i>
    </button>
    <div id="div-{{ $col->header }}-new" data-orig=""></div>
</td>

The popover opens OK but the close button does not fire.

Additionally, the popover does not stay fixed to its target if I scroll the page.

Thanks

Jennifer Goncalves
  • 1,442
  • 1
  • 12
  • 29
TheRealPapa
  • 4,393
  • 8
  • 71
  • 155
  • I've previously answered a question that could help you resolve your issue: https://stackoverflow.com/questions/54913929/html-nesting-strings-in-strings-in-attributes/54914635#54914635 – Kevin Pastor Mar 19 '19 at 16:21
  • Since your onclick event is created when the page loads, newly created elements wont be affected by the callback. – Kevin Pastor Mar 19 '19 at 16:22
  • 1
    @KevinPastor where is the onclick event handler? All I'm seeing is the delegate on the document. – Taplar Mar 19 '19 at 16:31
  • Your jQuery function `.on("click", ...` is the click handler – Kevin Pastor Mar 19 '19 at 19:17

0 Answers0