Verwenden von Bootstrap-Popover-Callback

Question

Ich verwende derzeit Bootstrap-Popovers, um einige zusätzliche Felder zu meinem Formular hinzuzufügen. Um meine Auswahlfelder zu formatieren, muss ich den Popover-Rückruf nutzen, jedoch scheint es mir nicht möglich zu sein, den Rückruf zu aktivieren. Wenn Sie jsfiddle bevorzugen, check it out here. Vielen Dank für Anregungen.

$("[data-toggle=popover]").popover({ 
 
    html: true, 
 
    content: function() { 
 
    return $('#popover-content').html(); 
 
    }, 
 
    showCallback: function() { 
 
    alert('called back'); 
 
    } 
 
});

.container { 
 
    padding: 20px; 
 
} 
 
.form-control { 
 
    width: 120px; 
 
} 
 
.popover { 
 
    max-width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <h3>Bootstrap 3 Popover HTML Example</h3> 
 
    <ul class="list-unstyled"> 
 
    <li><a data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a> 
 
    </li> 
 
    <div id="popover-content" class="hide"> 
 
     <form class="form-inline" role="form"> 
 
     <div class="form-group"> 
 
      <h1>My content</h1> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </ul> 
 
</div>

Answer 1

Es gibt keine popover Option showCallback stattdessen versuchen, eine Bootstraps in popover events

zum Beispiel so aufgebaut mit Auslösung der Benachrichtigung, wenn die popover wird Sie diese

täte gezeigt

$("[data-toggle=popover]").on('shown.bs.popover', function() { 
    alert('called back'); 
}); 

Ich aktualisierte Ihre JS Fiddle für ein Beispiel ...

Answer 2

Versuchen Sie Folgendes: Ich habe eine Rückruffunktion hinzugefügt, indem Sie prototype von jquery verwenden.

var tmp = $.fn.popover.Constructor.prototype.show; 
$.fn.popover.Constructor.prototype.show = function() { 
    tmp.call(this); 
    if (this.options.callback) { 
    this.options.callback(); 
    } 
} 

this.$("[data-toggle=popover]").popover({ 
    html: true, 
    content: function() { 
    return $('#popover-content').html(); 
    }, 
    callback: function() { 
    alert('called back'); 
    } 
}); 

In Ihrem fiddle aktualisiert haben.