我做了一个
jsFiddle,我使用twitter bootstrap切换按钮&酥料饼.
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'); });
切换按钮有效,但是当我在弹出框中使用相同的按钮时,它将无法工作.
请建议一种方法.
解决方法
由于加载时不存在弹出按钮,因此需要使用事件委派.而不是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'); });
原文地址:https://www.jb51.cc/jquery/178191.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。