3

In my code I have a div that I use to load different content type using JQuery, Now the new content I loaded into the div has popovers, the problem is that the pop overs do not disappear when I load new content into the div, its almost like they get appended onto the new content.

How do I make them disappear when new content is loaded into the div ?

HTML

<div class='box-nfh genericGreyBackground'>
    <div class='box_74'>
        <h2>Performance management is an ongoing process of communication between a supervisor and an employee that occurs throughout the year, in support of accomplishing the strategic objectives of the organisation. It involves five distinct actions. </h2> 
        <div class='pentagonContainer'>
            <div class='pentagon'>
                <img src='images/pentagon.png'>
                <span class='pentagonCircle' id='penBtn1' type='button' data-container='body' data-toggle='popover' data-placement='top' data-content='Clarify expectations'> 1 </span> 
                <span class='pentagonCircle' id='penBtn2' type='button' data-container='body' data-toggle='popover' data-placement='top' data-content='Set objectives'> 2 </span> 
                <span class='pentagonCircle' id='penBtn3' type='button' data-container='body' data-toggle='popover' data-placement='top' data-content='Identify goals'> 3 </span> 
                <span class='pentagonCircle' id='penBtn4' type='button' data-container='body' data-toggle='popover' data-placement='top' data-content='Provide feedback'> 4 </span> 
                <span class='pentagonCircle' id='penBtn5' type='button' data-container='body' data-toggle='popover' data-placement='top' data-content='Evaluate results'> 5 </span> 
            </div>
        </div>
    </div>
</div>
perror
  • 7,071
  • 16
  • 58
  • 85
Phetole Lebea
  • 61
  • 5

2 Answers2

0

Pending your answer on how the code is injected into the 'div' here's my anwser.

Before injecting the new content, you can destroy the existing popovers. This will remove them from the UI/DOM (and free up some memory in the process).

$('.pentagonCircle').popover('destroy')

You might want to change the selector, maybe limit it to a specific parent.

Documentation: http://getbootstrap.com/javascript/#popovers

David De Sloovere
  • 3,415
  • 2
  • 24
  • 27
  • Thanks for the reply. I just changed the data-container attr from body to pentagonContainer and it works like sunrise and sunset. – Phetole Lebea Aug 11 '15 at 12:17
  • I missed that one. Makes perfect sense, the popovers were attached to the body, which was still there after you swapped out the content of the 'div'. – David De Sloovere Aug 11 '15 at 12:25
0

Use this code 'before' ajax call:

function DisablePopovers() {
  $("span.popover").popover('hide');
  $("span.popover").popover('disable');
  // Remove the popover DIV from the DOM
  $(".popover").remove();
}

Now set OnClick To your Elements and pass this method.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
POOYA
  • 1
  • 1
  • 2