title: Angular 5 - How to dynamically add event on a DOM element?
body: <p>I'm try to implement a search input as the one on "Medium" website by adding a new suggestion (based on the input context for full text search) at the top of the list of the current suggestions. I'm on an angular 5 project and I use typeahead  for research module.  </p>
  
  <p>So this is how I add new suggestion on top off typeahead list:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var nba = [{
    "team": "Boston Celtics"
  }, {
    "team": "Dallas Mavericks"
  }, {
    "team": "Brooklyn Nets"
  }, {
    "team": "Houston Rockets"
  }, {
    "team": "New York Knicks"
  }, {
    "team": "Memphis Grizzlies"
  }, {
    "team": "Philadelphia 76ers"
  }, {
    "team": "New Orleans Hornets"
  }, {
    "team": "Toronto Raptors"
  }, {
    "team": "San Antonio Spurs"
  }];
  var teams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: nba
  });
  var search = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [{
      'team': 'xxxxx'
    }]
  });
  
  $('#multiple-datasets .typeahead').typeahead({
      highlight: true,
      hint: false,
      minlenght: 2
    },
  
    {
      name: 'search-in-team',
      display: 'team',
      source: teams,
      templates: {
        header: '&lt;div class="group"&gt;Teams&lt;/div&gt;'
      }
    });
  
  $('.typeahead').bind('typeahead:render', (event, suggestions, async, dataset) =&gt; {
    $('.tt-dataset').prepend('&lt;div class="tt-suggestion tt-selectable added" &gt; &lt;span class="strong"&gt; Search for "' + $('.typeahead').val() + '"&lt;/span&gt;&lt;/div&gt;');
  });
  
  $('.typeahead').bind('typeahead:select', (ev, suggestion) =&gt; {
    alert(suggestion.team)
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.group {
    padding: .5rem .5rem 0rem .5rem;
    font-family: $avenir_next;
    color: $color-47;
    border-bottom: 1px solid grey;
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"&gt;&lt;/script&gt;
  
  &lt;div id='multiple-datasets'&gt;
    &lt;input type="text" id="sskSearch" class="typeahead" placeholder="Search"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have an alert when I click on the suggestion under "Teams", But nothing happen when click on the new first element I manually added ("Search for 'xxxx').
  <a href="https://i.stack.imgur.com/EWMRq.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Any help Please!!!</p>