Ember-js Onclick function not work

Question

Im used Bootstrap v4-alpha Im added pop over its working, but i need to add popover-content for the on click function its not fire in Ember-js, how to put onclick function in emebr-js this is im used onlick event

<li class="list-group-item" onclick={{action `'event'}}>Airport Pickup</li>

This is my code sample add-newbooking.hbs

<div class="form-group">
        <a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category">
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder=""></a>
      </div>

<title>Bootstrap Example</title>

<!-- loaded popover content -->
<div id="popover-content" style="display: none">
  <ul class="list-group custom-popover">
    <li class="list-group-item" onclick={{action 'event'}}>Airport Pickup</li>
    <li class="list-group-item" >Food and Beverage</li>
    <li class="list-group-item">Yoga Class</li>
  </ul>
</div>


<script>$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  });
});</script>

add-newbooking.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    event: function () {
      console.log("ppessssssss")
    }
  }
});

Answer 1

The guides have a whole section on this

<li class="list-group-item" {{action 'event'}}>Airport Pickup</li>

You could be better off adding a link or button inside the list item though so that the button is focusable etc