wake-up-neo.com

Hängen Sie den Ereignishandler an die Schaltfläche in Twitter-Bootstrap-Popover an

Ich benutze die Twitter-Bootstrap-Popovers,

Im Popover füge ich einen Button hinzu,

Ich muss einen click-Handler an die Schaltfläche anbringen, Popover funktioniert jedoch jedes Mal, wenn angezeigt wird, dass das Element entfernt und neu erstellt wird, anstatt es nur anzuzeigen/auszublenden sagte der Knopf.

Ich erstelle mehrere Popovers mit einer eigenen Version der Schaltfläche. Das Anwenden einer Klasse auf das Popover funktioniert daher nicht (es sei denn, ich generiere für jede eine andere Klasse: /). Die Schaltfläche hat möglicherweise eine eigene ID kann also keine ID anwenden.

Wie kann ich einen Event-Handler auf etwas im Inhalt des Twitter-Bootstrap-Popovers anwenden?

24
Hailwood

Ich hatte das gleiche Problem, und in meinem Fall funktioniert die Problemumgehung $(body).on('click') nicht, da die Anwendung nur wenige Schaltflächen hat.

Ich habe stattdessen folgendes getan. Auf diese Weise können wir den Geltungsbereich des Delegate-Ereignisses auf das übergeordnete Element des Popover-Elements beschränken.

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
    console.log('World!');
});

JS Fiddle: http://jsfiddle.net/dashk/5Yz7z/

P.S. Ich habe diese Technik in einem Backbone.View in meiner Anwendung verwendet. Hier ist ein Ausschnitt des Codes in Fiddle, falls Sie dies auch in Backbone.js verwenden ...: http://jsfiddle.net/dashk/PA6wY/

EDITED.__Im Bootstrap 2.3 können Sie einen Zielcontainer angeben, zu dem der Popover hinzugefügt wird. Anstatt den .parent () - Locator auszuführen, können Sie auch Ereignisse speziell für den Container überwachen. Dies kann den Listener noch spezifischer machen.

35
DashK

Das sollte es tun. Dadurch werden alle vorhandenen und zukünftigen Schaltflächenelemente berücksichtigt, die in einem Element mit der Klasse .popover erstellt werden:

$('body').on('click', '.popover button', function () {
    // code here
});
26
manishie

Nur ein wenig Update DashK s sehr gute Antwort: .delegate () wurde durch .on () ab jQuery 1.7 (siehe hier ) ersetzt.

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().on('click', 'button#close-me', function() {
    console.log('World!');
});

Siehe jsfiddle hier: http://jsfiddle.net/smingers/nCKxs/2/

Ich hatte auch einige Probleme mit der Verkettung der .on () - Methode zu $ ​​('a.foo'); Wenn ein solches Problem auftritt, fügen Sie es dem Dokument, dem Hauptteil oder der HTML-Datei hinzu, z. B .:

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
});

$('body').on('click', 'button#close-me', function() {
    console.log('World!');
});
10
smingers

Eine sehr einfache Lösung, die für mich funktioniert hat, ist:

// suppose that popover is defined in HTML
$('a.foo').popover(); 

// when popover's content is shown
$('a.foo').on('shown.bs.popover', function() {
    // set what happens when user clicks on the button
    $("#my-button").on('click', function(){
        alert("clicked!!!");
    });
});

// when popover's content is hidden
$('a.foo').on('hidden.bs.popover', function(){
    // clear listeners
    $("#my-button").off('click');
});

Warum dies funktioniert: Grundsätzlich hat der Popover-Inhalt keinen Listener, bis der Popover geöffnet wird.

Wenn Popover angezeigt wird, löst bootstrap das Ereignis shown.bs.popover aus. Wir können einen Ereignishandler für dieses Ereignis mit der jQuery-Methode on an $(a.foo) anhängen. Wenn Popover angezeigt wird, wird die Handler-Funktion (Callback) aufgerufen. In diesem Callback können wir Event-Handler an den Inhalt des Popovers anhängen. Dies ist beispielsweise der Fall, wenn der Benutzer auf diese Schaltfläche im Popover klickt.

Nach dem Schließen des Popovers ist es ratsam, alle angehängten Handler für den Inhalt des Popovers zu entfernen. Dies geschieht über den hidden.bs.popover-Handler, der Handler mit der jQuery-.off-Methode entfernt. Dadurch wird verhindert, dass Event-Handler im Popover zweimal (und mehr) aufgerufen werden, wenn der Popover erneut geöffnet wird ...

9
mrtn

Sie können in Schwierigkeiten geraten, wenn Sie eine komplexere Struktur in den Inhalt von popover einfügen, beispielsweise eine externe Komponente. Für diesen Fall sollte dies den Trick tun.

var content = $('<button>Bingo?</button>');
content.on('click', function() {
    alert('Bingo!')
});

$('a.foo').popover({
    html: true,
    content: content
}).on('hidden.bs.popover', function() {
    content.detach(); # this will remove content nicely before the popover removes it
});
1
Patrik Šimek
$('.btn-popover').parent().delegate('button#close-me','click', function(){
  alert('Hello');
});

Wenn Datenattribute in statischem html festgelegt sind, funktioniert die obige Methode gut. Vielen Dank :)

0
Sandeep

versuche dies

var content = function() {
    var button = $($.parseHTML("<button id='foo'>bar</button>"));
    button.on('click', '#foo', function() {
        console.log('you clicked me!');
    } );
    return button;
};

$( '#new_link' ).popover({
    "html": true,
    "content": content,
});
0
wahhzu