Popover, dodawanie wiersza do dynamicznie wygenerowanej tabeli.

Question

Chciałem dostać taki efekt, że po kliknięciu w komórkę w tablicy wygenerowanej dynamicznie przy pomocy popover z Bootstrap 4 pokaże mi się przycisk add row i po jego kliknięciu dodam wiersz. Kod niby działa ale z opóźnieniem i dodawało kilka wierszy. 

$(document).ready(function () {
$('td').on('click', function () {
                $(this).popover({
                    placement: 'bottom',
                    container: 'body',
                    title: "Right click to add cell",
                    html: true,
                    content: '<button class="pop-Add">add row</button>'
 
                });
                var td = $(this);
                $('button.pop-Add').on('click', function () {
                    $(td).parent().before('<tr><td>new</td><td>new</td></tr>');
                   
                });
            });
  });

Próbowałem jeszcze z innym sposobem przy użyciu 

rel="popover"

Jednak, nie wiem za bardzo jak przekazać klikniętą komórkę do popover, aby listener przychwytujący kliknięcia przycisku wiedziała że dodać wiersz do wcześniej klikniętej komórki.  

Dodałem kod na codepen, ale nie jest tam generowany tablica dynamicznie. 
https://codepen.io/anon/pen/Gxmmqr?editors=1011

Answer 1

Najprościej będzie po prostu trochę zmodyfikować click'a.

to: $('button.pop-Add').on('click', function () {

na: $('body').on('click','.pop-Add', function () {

Comments

Niestety to raczej nic nie zmieniło, nadal po kliknięciu na button dodaje się za dużo wierszy, potem popover nie chce się schować itp.

Answer 2

Problemem, chyba było to że listener na pop-Add był wewnątrz tego pierwszego. Dodatkowo, aby wiedział który element był kliknięty trzeba zeminić contener na właśnie kliknięty element. 

$('body').on('click', 'td', function () {
	var td = this;
	$(this).popover({
	    placement: 'bottom',
	    container: td,	// dodajemy popover do klikniętego elementu 
	    trigger: 'click',
	    html: true,
	    content: '<button class="pop-Add">add row</button>'
	});
    });
    $('body').on('click', '.pop-Add', function () {
	$(this).closest('tr').before('<tr><td>new</td><td>new</td></tr>');
    });