Bootsrap data-toggle doesn't work with ember component

I have a jquery plugin that creates following html

<div class="panel-heading">
                    <h4 class="">
                      <a data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">Select Gigs</a>
                    </h4>
                  </div>
                  <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <input type="text" class="input-text-field margin-medium-bottom" placeholder="Search"/>
                            </div>
                        </div>

...... and some other divs here .....

I want to toggle div with id collapse2 when click on <a></a> above it. It works fine if I add the html inside hbs file. But when I create above html inside jquery and insert into the DOM as follows it change the url to domain/#collapse2

    _initializeAutoComplete: function () {
        Ember.$('#' + this.get('divId')).setAutocomplete({
            data: this.get('dataTree'),
            multiSelect: true,
            selectingType: 3
        });

    }.on('didInsertElement')
});

How can I make the toggling work without ember going to href as a url change? Appreciate any help.