弹出窗口内容中的引导切换按钮不起作用答案

【问题标题】：Bootstrap toggle buttons inside popover content not working弹出窗口内容中的引导切换按钮不起作用
【发布时间】：2014-09-09 14:38:19
【问题描述】：

我创建了一个jsFiddle，我在其中使用 twitter 引导切换按钮和弹出框。

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

});

切换按钮可以工作，但是当我在弹出框内使用相同的按钮时，它将无法工作。

请提出一种方法。

【问题讨论】：

在 jsfiddle 上有一个控制台错误Uncaught SyntaxError: Unexpected token ; ，虽然我不确定这是否相关
@Dan 不，它与那个错误无关。

标签： jquery twitter-bootstrap twitter-bootstrap-3 popover togglebutton

【解决方案1】：

如果您要将新元素添加到页面，您应该这样做：

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

            });

这是一个小提琴：

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

【讨论】：

【解决方案2】：

由于您的弹出按钮在加载时不存在，您需要使用事件委托。此外，您应该使用 length 属性，而不是 size()（自 jQuery 1.8 起已弃用）：

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

【讨论】：