使用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>