Popover stops working after refreshing div? - php

Question

I have anchor tags that when clicked, create popovers. After clicking a button in the popover, an ajax call is made which updates a database. The popover disappears and the div containing the popover anchor tags is refreshed. Following the div refresh, the anchor tags no longer display the popovers when clicked and when an anchor tag is hovered, it displays a title equal to the popover title. What is causing the popover not to work after a div refresh?
div that gets refreshed
<div class="content" id="content">
<div class="row">
<div class="col-3 heading">A</div>
<div class="col-3 heading">B</div>
</div>
<div class="row">
<a href="#" class="col-3 data
edit" data-toggle="popover" data-trigger:'click' data-html="true"
data-placement="top" title=""
data-content="
<div id='error'></div>
<form id='editForm'>
<input type='number' maxlength='5'class='form-control'
name='newAmount' id='newAmount'
value=''placeholder='New Amount'>
<br>
<input type='hidden' value='Car/Auto' name='catName'id='catName'>
<input type='submit' class='btn btn-primary btnPopover form-
control' value='Change'id='btnEdit' name='btnEdit'>
<a class='btn btn-warning btnPopover form-control'
id='btnCancelEdit'>Cancel</a>
</form>"
data-original-title="<div class='popoverTitle'>Edit </div>">
$900</a>
<div class="col-3 data">$500</div>
</div>
</div>
jquery to originally initialize popovers
$(function () {
loadPopovers();
})
function loadPopovers() {
$('[data-toggle="popover"]').popover();
$('.edit').click(function(){
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});
}
jquery ajax for div refresh
$(document).on('click','#btnEdit',function(e){
e.preventDefault();
var newAmount = $('#newAmount').val();
if(newAmount.length == 0){
document.getElementById("error").innerHTML = "<span
class='error'>Type a new amount or click cancel.</span>";
}else {
$.ajax({
type: 'post',
url: 'edit.php',
dataType: "json",
data: $('form').serialize(),
success: function (response) {
if(response.status === 'success'){
//Refresh div data
$.get("dataRefresh.php", {},
function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
}
}
});
}
});

Answer 1

Change
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
To
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
});
If you are going to use direct bindings, you have to run them after the data is rebuilt.