Bootstrap内部弹出式窗口内容的切换按钮不起作用(Bootstrap toggle buttons inside popover content not working)

Bootstrap内部弹出式窗口内容的切换按钮不起作用(Bootstrap toggle buttons inside popover content not working)

我做了一个jsFiddle ，我使用twitter bootstrap切换按钮和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'); });

切换按钮可以工作，但是当我在弹出窗口中使用相同的按钮时，它不起作用。

请提出一种方法。

I have made a jsFiddle where i use twitter bootstrap toggle buttons & 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'); });

The toggle button works, but when i use the same buttons inside a popover, it won't work.

Please suggest a method.

最满意答案

由于您的弹出式按钮在加载时不存在，因此您需要使用事件委派。 而不是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'); });

更新小提琴

Since your popover buttons do not exist at load time you need to use event delegation. Also instead of size() (which is deprecated as of jQuery 1.8) you should use the length property:

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