使用Bootstrap的popover标签中嵌入插件，并且为插件注册事件实现Ajax与后台交互

 1 <script type="text/javascript">
 2         var _types = ‘0‘;
 3         var _status = ‘0‘;
 4        
 5         $(function () {
 6             LoadFilter();
 7         });
 8 
 9         function search() {
10             $.ajax({
11                 ....
12             });
13         }
14 
15         function LoadFilter() {
16             var _content = ‘‘;
17             _content += ‘<div class="menu-item" _t="types"><span class="title">类型</span>‘
18             _content += ‘<div class="btn-group">‘
19             _content += ‘<button id="types_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>‘
20             _content += ‘<button id="types_1" _v="1" type="button" class="btn btn-default btn-xs">收入</button>‘
21             _content += ‘<button id="types_2" _v="2" type="button" class="btn btn-default btn-xs">支出</button>‘
22             _content += ‘</div>‘
23             _content += ‘</div>‘
24             _content += ‘<div class="menu-item" _t="status"><span class="title">状态</span>‘
25             _content += ‘<div class="btn-group">‘
26             _content += ‘<button id="status_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>‘
27             _content += ‘<button id="status_1" _v="1" type="button" class="btn btn-default btn-xs">编辑中</button>‘
28             _content += ‘<button id="status_2" _v="2" type="button" class="btn btn-default btn-xs">编辑完成</button>‘
29             _content += ‘<button id="status_3" _v="3" type="button" class="btn btn-default btn-xs">复核完成</button>‘
30             _content += ‘</div>‘
31             _content += ‘</div>‘
32 
33             $(‘#btnFilter‘).popover({
34                 placement: ‘bottom‘,
35                 trigger: ‘manual‘,
36                 html: true,
37                 content: _content
38             }).on(‘click‘, function () {
39                 var _this = this;
40                 $(this).popover(‘show‘);
41                 $(this).on(‘shown.bs.popover‘, function () {
42                     $(document).bind("click", function (e) {
43                         var target = $(e.target);
44                         if (target.closest(".popover").length == 0) {
45                             $(_this).popover(‘hide‘);
46                         }
47                     });
48 
49                     $("div[_t=‘types‘]").find("button[_v=‘" + _types + "‘]").addClass(‘active‘);
50                     $("div[_t=‘status‘]").find("button[_v=‘" + _status + "‘]").addClass(‘active‘);
51 
52                     $("div[_t=‘types‘]").find(‘button‘).unbind(‘click‘);
53                     $("div[_t=‘types‘]").find(‘button‘).bind(‘click‘, function () {
54                         $("div[_t=‘types‘]").find(‘button‘).removeClass(‘active‘);
55                         $(this).addClass(‘active‘);
56                         _types = $(this).attr("_v");
57                         search();
58                     });
59 
60                     $("div[_t=‘status‘]").find(‘button‘).unbind(‘click‘);
61                     $("div[_t=‘status‘]").find(‘button‘).bind(‘click‘, function () {
62                         $("div[_t=‘status‘]").find(‘button‘).removeClass(‘active‘);
63                         $(this).addClass(‘active‘);
64                         _status = $(this).attr("_v");
65                         search();
66                     });
67                 });
68                 $(this).on(‘hidden.bs.popover‘, function () {
69                     $(document).unbind();
70                 });
71             });
72         }
73     </script>