为什么我的click事件在骨干视图中的模态按钮中多次附加

Question

在骨骼视图中，我正在渲染具有引导模式的模板。我的骨干视图有一个引导模态窗口的事件，第一次当我打开引导窗口它工作正常。下次如果我打开bootstrap模态窗口那个事件多次连接。

模板：

<script id="adUser-template" type="template/underscore">
    <div class="modal fade" id="adUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Active Directory Search</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id='btnSearchUser' class="btn btn-primary">Search</button>
                </div>
            </div>
        </div>
    </div>

查看：

var ADSearchView = Backbone.View.extend({
        el: 'form',
        template: _.template($('#adUser-template').html()),
        initialize: function () {
            this.render();
        },
        render: function () {
            var renderedTemplate = this.template({});
            this.$el.append(renderedTemplate);
            $('#adUserModal').modal('show');
        },
        events: {
            'click #btnSearchUser': function (e) {
            e.preventDefault();
            this.adSearch();
            }
        },
        adSearch: function () {
            //below used to detach the click event once function called
                $('#adUserModal').on('hidden.bs.modal', function (event) {
                    $(this).find('#btnSearchUser').off('click');
                });
        },
    });