Bootstrap attiva i pulsanti all'interno del contenuto popover non funzionante

Question

Ho creato uno dove utilizzo i pulsanti di avvio di avvio di twitter & popover.

HTML:

<div class="btn-group btn-toggle"> 
    <button class="btn btn-sm btn-info">On</button> 
    <button class="btn btn-sm btn-primary active">Off</button> 
</div> 

<button id="popbutton" class="btn btn-lg btn-warn">pop up</button> 

JS:

var popupElement = '<div class="btn-group btn-toggle"><button class="btn btn-sm btn- info">On</button><button class="btn btn-sm btn-primary active">Off</button></div>'; 

$('#popbutton').popover({ 
    animation: true, 
    content: popupElement, 
    html: true 
}); 


$('.btn-toggle').click(function() { 
    $(this).find('.btn').toggleClass('active'); 

    if ($(this).find('.btn-primary').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-primary'); 
    } 
    if ($(this).find('.btn-danger').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-danger'); 
    } 
    if ($(this).find('.btn-success').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-success'); 
    } 
    if ($(this).find('.btn-info').size() > 0) { 
     $(this).find('.btn').toggleClass('btn-info'); 
    } 

    $(this).find('.btn').toggleClass('btn-default'); 

}); 

La ginocchiera pulsante funziona, ma quando uso gli stessi pulsanti all'interno popover, non funzionerà.

Si prega di suggerire un metodo.

Answer 1

Dal momento che non esistono i pulsanti popover al momento del caricamento è necessario utilizzare la delega degli eventi. Inoltre, invece di size() (che è deprecato come di jQuery 1.8) si dovrebbe utilizzare la proprietà length:

$('body').on('click','.btn-toggle',function() { 
    $(this).find('.btn').toggleClass('active'); 

    if ($(this).find('.btn-primary').length > 0) { 
     $(this).find('.btn').toggleClass('btn-primary'); 
    } 
    if ($(this).find('.btn-danger').length > 0) { 
     $(this).find('.btn').toggleClass('btn-danger'); 
    } 
    if ($(this).find('.btn-success').length > 0) { 
     $(this).find('.btn').toggleClass('btn-success'); 
    } 
    if ($(this).find('.btn-info').length > 0) { 
     $(this).find('.btn').toggleClass('btn-info'); 
    } 

    $(this).find('.btn').toggleClass('btn-default'); 
}); 

Updated fiddle

Answer 2

questo è come si dovrebbe fare, se vuoi aggiunge nuovi elementi alla tua pagina:

$('body').on('click','.btn-toggle',function() { 

       $(this).find('.btn').toggleClass('active'); 

       if ($(this).find('.btn-primary').length > 0) { 
        $(this).find('.btn').toggleClass('btn-primary'); 
       } 
       if ($(this).find('.btn-danger').length > 0) { 
        $(this).find('.btn').toggleClass('btn-danger'); 
       } 
       if ($(this).find('.btn-success').length > 0) { 
        $(this).find('.btn').toggleClass('btn-success'); 
       } 
       if ($(this).find('.btn-info').length > 0) { 
        $(this).find('.btn').toggleClass('btn-info'); 
       } 

       $(this).find('.btn').toggleClass('btn-default'); 

      }); 

Ecco un violino:

http://jsfiddle.net/prollygeek/ZVak6/5/