Question

我做了一个jsFiddle，我使用twitter bootstrap切换按钮＆amp;酥料饼。

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

});

切换按钮有效，但是当我在弹出窗口中使用相同的按钮时，它将无法工作。

请建议一种方法。

Answer 1

由于加载时您的弹出按钮不存在，因此您需要使用事件委派。而不是size()（从jQuery 1.8开始不推荐使用），你应该使用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

如果您要在页面中附加新元素，

这就是你应该怎么做的：

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

弹出窗口内容中的Bootstrap切换按钮不起作用

2 个答案: