У меня есть теги привязки, которые при нажатии создают всплывающие окна. После нажатия кнопки во всплывающем окне выполняется ajax-вызов, который обновляет базу данных. Всплывающее окно исчезнет, а элемент div, содержащий теги привязки всплывающего окна, обновится. После обновления div теги привязки больше не отображают всплывающие окна при нажатии, а при наведении привязки тега отображается заголовок, равный заголовку всплывающего окна. Что заставляет поповер не работать после обновления div?
Div, который обновляется
<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 для первоначальной инициализации popovers
$(function () {
loadPopovers();
})
function loadPopovers() {
$('[data-toggle="popover"]').popover();
$('.edit').click(function(){
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});
}
JQuery AJAX для обновления Div
$(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();
}
}
});
}
});
+ Изменить
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
к
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
});
Если вы собираетесь использовать прямые привязки, вы должны запускать их после восстановления данных.
Других решений пока нет …