Question

我有一些锚标记，单击这些锚标记可以创建弹出窗口。单击弹出窗口中的按钮后，将进行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最初用于初始化弹出窗口

        $(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();
                        }                   
                    }
                });
            }
        });

Answer 1

更改

//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();
});

如果要使用直接绑定，则必须在重建数据之后运行它们。

刷新div后，弹出窗口停止工作了吗？

1 个答案: