Nút chuyển đổi Bootstrap bên trong nội dung popover không hoạt động

Question

Tôi đã thực hiện một jsFiddle nơi tôi sử dụng nút chuyển đổi khởi động twitter & cửa sổ bật lên.

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:

công trình nút

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

}); 

Các chuyển đổi, nhưng khi tôi sử dụng các nút tương tự bên trong một popover, nó sẽ không làm việc.

Vui lòng đề xuất phương pháp.

Answer 1

Kể từ nút popover của bạn không tồn tại tại thời điểm tải bạn cần sử dụng ủy quyền sự kiện. Ngoài ra thay vì size() (mà bị phản đối như jQuery 1.8), bạn nên sử dụng length tài sản:

$('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

đây là cách bạn nên làm điều đó, nếu bạn sẽ thêm yếu tố mới vào trang của bạn:

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

      }); 

đây là một fiddle:

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