jQuery Question

Configuring a bootstrap popover to appear only once?

I'm using a Bootstrap .popover() to display a notification whenever an input field does not match the expected format. I thought it would be straight forward to kill the popover in the

event, but doing so lands me in a recursion loop with the error reading:

error (firebug):
too much recursion

line 4985 in wordpress/wp-includes/js/jquery/jquery.js?ver=1.10.2
for ( ; cur; cur = cur.parentNode ) {

I tried returning false from the event handler as well as calling
. I can see why that's a wrong approach, and would ask for suggestions on how to cleanly destroy the .popover after it has been shown and closed one time.

placement: 'top',
title: 'Invalid input',
content: 'Please type in a valid value'
.on('hidden.bs.popover', function (e) {
//console.log('destroy', e);


//return false;

Answer Source

According to the documentation, destroy calls hide:

Hides and destroys an element's popover.

You could try to unregister the hidden.bs.popover inside its event handler, before calling destroy there, and reattach it in the show event. This isn't necessarily clean coding, but it'll get the job done and is acceptable in my opinion.

Something like (pseudo code):

function onPopoverHidden(ev) {
    // Unregister self, by calling .off('hidden.bs.popover') on the popover object
    // Then, call .popover('destroy') on it.

.on('show.bs.popover', function() {
    // (re-)attach onPopoverHidden event handler function
.on('hidden.bs.popover', onPopoverHidden);


invalid_regex_input.popover({/* settings */})
.on('hidden.bs.popover', function (e) {