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

下午研究了一下bootstrap的popover写了个例子。如果项目很多地方都需要用到可以考虑封装成插件。

javascript代码：

 <script type="text/javascript">
         var _types = '0';
         var _status = '0';

         $(function () {
             LoadFilter();
         });

         function search() {
             $.ajax({
                 ....
             });
         }

         function LoadFilter() {
             var _content = '';
             _content += '<div class="menu-item" _t="types"><span class="title">类型</span>'
             _content += '<div class="btn-group">'
             _content += '<button id="types_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>'
             _content += '<button id="types_1" _v="1" type="button" class="btn btn-default btn-xs">收入</button>'
             _content += '<button id="types_2" _v="2" type="button" class="btn btn-default btn-xs">支出</button>'
             _content += '</div>'
             _content += '</div>'
             _content += '<div class="menu-item" _t="status"><span class="title">状态</span>'
             _content += '<div class="btn-group">'
             _content += '<button id="status_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>'
             _content += '<button id="status_1" _v="1" type="button" class="btn btn-default btn-xs">编辑中</button>'
             _content += '<button id="status_2" _v="2" type="button" class="btn btn-default btn-xs">编辑完成</button>'
             _content += '<button id="status_3" _v="3" type="button" class="btn btn-default btn-xs">复核完成</button>'
             _content += '</div>'
             _content += '</div>'

             $('#btnFilter').popover({
                 placement: 'bottom',
                 trigger: 'manual',
                 html: true,
                 content: _content
             }).on('click', function () {
                 var _this = this;
                 $(this).popover('show');
                 $(this).on('shown.bs.popover', function () {
                     $(document).bind("click", function (e) {
                         var target = $(e.target);
                         if (target.closest(".popover").length == 0) {
                             $(_this).popover('hide');
                         }
                     });

                     $("div[_t='types']").find("button[_v='" + _types + "']").addClass('active');
                     $("div[_t='status']").find("button[_v='" + _status + "']").addClass('active');

                     $("div[_t='types']").find('button').unbind('click');
                     $("div[_t='types']").find('button').bind('click', function () {
                         $("div[_t='types']").find('button').removeClass('active');
                         $(this).addClass('active');
                         _types = $(this).attr("_v");
                         search();
                     });

                     $("div[_t='status']").find('button').unbind('click');
                     $("div[_t='status']").find('button').bind('click', function () {
                         $("div[_t='status']").find('button').removeClass('active');
                         $(this).addClass('active');
                         _status = $(this).attr("_v");
                         search();
                     });
                 });
                 $(this).on('hidden.bs.popover', function () {
                     $(document).unbind();
                 });
             });
         }
     </script>