Bootstrap数据切换不适用于ember组件

Question

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.

Answer 1

Move the bootstrap attributes to the div above (or h4 or create new as your need)

<div class="panel-heading" data-toggle="collapse" href="#collapse2" class="collapsible-title display-inline full-width bold">
  <h4 class="">
    <a href="#">Select Gigs</a>
  </h4>
</div>