douzai8285
douzai8285
2018-07-27 19:32
浏览 74

刷新div后,Popover停止工作?

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();
                        }                   
                    }
                });
            }
        });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqgg25493
    dqgg25493 2018-07-27 19:40
    已采纳

    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.

    点赞 评论

相关推荐