title: The event click does not work after ajax response
body: <p>i have a list of personal loaded in page when i click to an element of the list i display it information ; the click run very well but when i click in a button to filter this list for example to display in this list the developer personal the click to display information does not fire.</p>
  
  <p>i forgot to tell you i have done this </p>
  
  <pre><code>        $("ul").on("click", "li a", function() {
              console.log("clicked");
          });
  </code></pre>
  
  <p>but still not working</p>
  
  <pre><code>            &lt;ul class="mail-list"&gt;
                  &lt;li class="mail-list-item"&gt;
                      &lt;a class="mail-list-link" href="#show"&gt;
                          &lt;div class="mail-list-name"&gt;John&lt;/div&gt;
                          &lt;div class="mail-list-content"&gt;
                              &lt;span class="mail-list-subject"&gt;Developer&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="mail-list-item"&gt;
                      &lt;a class="mail-list-link" href="#show"&gt;
                          &lt;div class="mail-list-name"&gt;Mike&lt;/div&gt;
                          &lt;div class="mail-list-content"&gt;
                              &lt;span class="mail-list-subject"&gt;Designer&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;   
  </code></pre>
  
  <p>javascript </p>
  
  <pre><code>'use strict';
  
  (function ($) {
  'use strict';
  
  var Mail = {
      Constants: {
          MEDIA_QUERY_BREAKPOINT: '992px'
      },
      CssClasses: {
          MAIL_LIST: 'mail-list',
          MAIL_LIST_ITEM: 'mail-list-item',
          MAIL_LIST_LINK: 'mail-list-link',
          MAIL_CONTENT: 'mail-content',
          ACTIVE: 'active',
          HOVER: 'hover'
      },
      init: function init() {
          this.$window = $(window);
          this.$list = $('.' + this.CssClasses.MAIL_LIST);
          this.$items = $('.' + this.CssClasses.MAIL_LIST_ITEM);
          this.$links = $('.' + this.CssClasses.MAIL_LIST_LINK);
          this.$content = $('.' + this.CssClasses.MAIL_CONTENT);
          this.$backBtns = this.$content.find('[data-toggle="tab"]');
          this.breakpoint = null;
          this.bindEvents();
      },
      bindEvents: function bindEvents() {
          this.$items.on('mouseenter.e.mail', this.handleItemMouseEnter.bind(this));
          this.$items.on('mouseleave.e.mail', this.handleItemMouseLeave.bind(this));
  
          this.$links.on('click.e.mail', this.handleLinkClick.bind(this));
          this.$links.add(this.$backBtns).on('shown.bs.tab', this.handleTabShown.bind(this));
          $("ul").on("click", "li a", function() {
              console.log("clicked");
          });
          this.breakpoint = window.matchMedia('(max-width: ' + this.Constants.MEDIA_QUERY_BREAKPOINT + ')');
          this.breakpoint.addListener(this.handleMediaQueryChange.bind(this));
      },
      handleItemMouseEnter: function handleItemMouseEnter(evt) {
          $(evt.currentTarget).addClass(this.CssClasses.HOVER);
      },
      handleItemMouseLeave: function handleItemMouseLeave(evt) {
          $(evt.currentTarget).removeClass(this.CssClasses.HOVER);
      },
      handleLinkClick: function handleLinkClick(evt) {
          var $link = $(evt.currentTarget),
          $item = $link.closest('.' + this.CssClasses.MAIL_LIST_ITEM);
  
          if ($item.hasClass(this.CssClasses.ACTIVE)) $item.removeClass(this.CssClasses.ACTIVE);
  
          this.rememberScrollbarPos();
      },
      handleTabShown: function handleTabShown(evt) {
  
          var $trigger = $(evt.currentTarget),
          $activeLink = this.getActiveLink();
  
          if (!$trigger.is($activeLink)) {
              this.scrollTo(this.rememberedScrollbarPos());
              } else {
              this.scrollTo(0);
          }
      },
      handleMediaQueryChange: function handleMediaQueryChange(evt) {
          var $target = this[this.mediaQueryMatches() ? 'getBackBtn' : 'getActiveLink']();
  
          $target.length &amp;&amp; $target.trigger('click');
      },
      mediaQueryMatches: function mediaQueryMatches() {
          return this.breakpoint.matches;
      },
      rememberScrollbarPos: function rememberScrollbarPos() {
          this.ypos = this.$window.scrollTop();
      },
      rememberedScrollbarPos: function rememberedScrollbarPos() {
          return this.ypos;
      },
      getActiveItem: function getActiveItem() {
          return this.$items.filter('.' + this.CssClasses.ACTIVE);
      },
      getActiveMail: function getActiveMail() {
          return this.$content.filter('.' + this.CssClasses.ACTIVE);
      },
      getActiveLink: function getActiveLink() {
          var $activeItem = this.getActiveItem();
          return $activeItem.find('[data-toggle="tab"]');
      },
      getBackBtn: function getBackBtn() {
          var $activeMail = this.getActiveMail();
          return $activeMail.find('[data-toggle="tab"]');
      },
      scrollTo: function scrollTo(ypos) {
          this.$window.scrollTop(ypos);
      }
  };
  
  Mail.init();
  })(jQuery);
  </code></pre>