Bootstrap Popover, non .cliccate pulsante di cattura all'interno popover

Question

Prima di tutto, un violino del problema: jsfiddle.net

Sto usando un popover, ed è contenuto è html, un pulsante con classe "click_me". Ho jquery da ascoltare per un clic su "click_me" e dovrebbe lanciare un avviso. Tuttavia, non è così. Mi sto perdendo qualcosa?

JS:

jQuery(document).ready(function($) { 

$('.demo_button').click(function() { 
    $(this).popover({ 
       html: true, 
       trigger: 'manual', 
       placement: 'right', 
       content: function() { 
        var $buttons = $('#popover_template').html(); 
        return $buttons; 
       } 
    }).popover('toggle'); 
}); 

$('.click_me').click(function() { 
    alert('it works!'); 
}); 

}); 

HTML:

<button class="btn btn-primary demo_button">Click here</button> 

<div id="popover_template"> 
    <button class="btn click_me">Make Alert</button> 
</div> 

Answer 1

.Click() funziona solo per gli elementi che sono presenti sul carico è necessario utilizzare il()

$(document).on("click", ".click_me", function() { 
    alert('it works!'); 
}); 

Answer 2

Il tuo problema è che stai collegando un evento a un elemento che non è pronto a ricevere quell'evento. È necessario associare l'evento a un elemento padre, quindi è possibile filtrare per l'elemento. In questo modo non importa quando viene mostrato l'elemento cliccabile, funzionerà.

<div class="container"><br /> 
    <button class="btn btn-primary demo_button">Click here</button> 

    <div id="popover_template"> 
     <button class="btn click_me">Make Alert</button> 
    </div> 
</div> 

$('.container').on("click", ".click_me", function() { 
    alert('it works!'); 
}); 

Anche quando si fa questo, non collegarlo a un genitore che è troppo in alto l'albero. Vuoi collegarlo all'elemento genitore più vicino possibile. Non è necessario avere un evento click su qualcosa come document perché è una buona idea essere specifici di quali elementi otterranno questo evento. Allegarlo a document significa che qualsiasi elemento, che ha la classe click_me, sarà in grado di fare clic e rispondere allo stesso codice. Se si desidera avere funzionalità diverse in pulsanti diversi, non è possibile, perché rispondono tutti allo stesso codice collegato a document.

Ecco qui il tuo fiddle.

Answer 3

si dovrebbe provare il seguente:

jQuery(document).ready(function($) { 

    $('.demo_button').click(function() { 
     $(this).popover({ 
       html: true, 
       trigger: 'manual', 
       placement: 'right', 
       content: function() { 
        var $buttons = $('#popover_template').html(); 
        return $buttons; 
       } 
     }).popover('toggle'); 
     $('.click_me').off('click').on('click', function() { 
      alert('it works!'); 
     }); 
    }); 
}); 

Quando il DOM è pronto, è il pulsante non è ancora creata sei, facendo questo, ogni volta che il popover sorge potrete gestire l'evento nel pulsante creato.

Answer 4

Uso: show.bs.popover: questo evento viene generato immediatamente quando viene chiamato il metodo di istanza dello show.

$('#myPopover').on('hidden.bs.popover', function() { 
    // bind your button click event here 
})