Fissare gestore di eventi al pulsante twitter popover bootstrap

Question

Sto usando le popovers Twitter bootstrap,

Nel popover sto aggiungendo un pulsante,

ho bisogno di collegare un gestore click al pulsante, ma il modo in cui popover funziona è ogni volta che mostra che rimuove e ricrea l'elemento, invece di mostrarlo/nasconderlo, quindi rimuovere tutti i gestori di eventi che ho associato a detto pulsante.

Sto creando diversi popover tutti con la propria versione del pulsante, quindi l'applicazione di una classe al popover non funzionerà (a meno che non generi una classe diversa per ciascuno: /), il pulsante potrebbe non funzionare ha il proprio ID, quindi non può applicare un ID.

Come posso applicare un gestore di eventi a qualcosa nei contenuti del popover di bootstrap di Twitter?

Answer 1

Ho avuto lo stesso problema, e, nel mio caso, la soluzione $(body).on('click') non funziona, dal momento che la l'applicazione ha molti pulsanti per fare clic.

Ho fatto invece quanto segue. In questo modo, possiamo limitare l'ambito dell'evento delegato solo al genitore dell'elemento popover.

$('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. Ho usato questa tecnica all'interno di un Backbone.View nella mia applicazione. Ecco il frammento di codice in Fiddle, nel caso in cui si sta utilizzando questo Backbone.js così ...: http://jsfiddle.net/dashk/PA6wY/

a cura In Bootstrap 2.3, è possibile specificare un contenitore di destinazione, che popover verrà aggiunto a. Ora, invece di fare il locator .parent(), puoi anche ascoltare gli eventi specificatamente nel contenitore ... Ciò può rendere l'ascoltatore ancora più specifico (immagina di creare un DIV che esiste solo per contenere il popover)

Answer 2

Questo dovrebbe farlo. Questo si prenderà cura di tutti gli elementi dei pulsanti esistenti e futuri creati all'interno di un elemento con la classe .popover:

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

Answer 3

provare questo

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, 
}); 

Answer 4

$('.btn-popover').parent().delegate('button#close-me','click', function(){ 
    alert('Hello'); 
}); 

Se gli attributi dei dati sono fissati in html statico metodo di cui sopra funziona bene. Grazie :)

Answer 5

Solo per aggiornare leggermente la risposta di DashK: .delegate() è stato sostituito da .on() a partire da jQuery 1.7 (vedere here).

$('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!'); 
}); 

Vedi jsfiddle qui: http://jsfiddle.net/smingers/nCKxs/2/

ho anche avuto alcuni problemi con il concatenamento il metodo .on() per $ ('a.foo'); se si verifica un tale problema, prova ad aggiungere al documento, il corpo, o html, ad es .:

$('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!'); 
}); 

Answer 6

È possibile ottenere nei guai se si aggiunge la struttura più complessa nel contenuto di popover, ad esempio un componente esterno. Per questo caso, questo dovrebbe fare il trucco.

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 
}); 

Answer 7

Molto semplice soluzione che ha funzionato per me è:

// 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'); 
}); 

Perché funziona: il contenuto Fondamentalmente del popover non ha ascoltatore fino all'apertura del popover.

Quando popover viene visualizzato, bootstrap attiva il suo evento shown.bs.popover. Possiamo associare un gestore di eventi a questo evento a $(a.foo) utilizzando il metodo jQuery on. Quindi, quando viene mostrato popover, viene chiamata la funzione handler (callback). In questo callback, possiamo associare gestori di eventi al contenuto del popover, ad esempio: cosa succede quando l'utente fa clic su questo pulsante all'interno del popover.

Dopo il popover è chiuso, è consigliabile rimuovere tutti i gestori collegati al contenuto del popover. Questo viene fatto tramite il gestore hidden.bs.popover, che rimuove i gestori con il metodo jQuery .off. Questo impedisce ai gestori di eventi all'interno del popover di essere chiamati due volte (e di più) quando il popover viene riaperto ...