title: How to fix problem with clicking event on bxSlider item in Chrome 73?
body: <p>A bxSlider's inner item click event doesn't fire after Chrome has updated to version 73. How can I fire .on('click') event for elements in new Chrome?</p>
  
  <p>It fires in Chrome when slides are moving. 
  Everyting is fine in FireFox</p>
  
  <pre><code>&lt;div class="slider-pager"&gt;
    &lt;div class="slider-pager__item"&gt;&lt;img src="1.jpg" alt=""&gt;&lt;/div&gt;
    &lt;div class="slider-pager__item"&gt;&lt;img src="2.jpg" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
          carouselProduct = $('.slider-pager').bxSlider({
              maxSlides:  3,
              minSlides: 3,
              slideWidth: 90,
              infiniteLoop: false,
              moveSlides: 1,
              slideMargin: 8,
              pager: false,
              nextSelector: '.slider__nav--next',
              prevSelector: '.slider__nav--prev',
              nextText: '→',
              prevText: '←'
  
          });
    $('.slider-pager__item').on('click', function (event) {
      //Don't fire in Chrome 73, works in FireFox
              $('.slider-pager__item').removeClass('active');
              $(this).addClass('active');
  
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>JS Fiddle <a href="https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/" rel="nofollow noreferrer">https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/</a></p>
  
  <p><strong>UPDATE:</strong>
  I have made a workaround for this slider, handling wrapper onClick event:</p>
  
  <pre><code>$('.slider-pager').parent().on('click', function (event) {
      var $hover_item = $('.slider-pager__item:hover');
      //Checking if we have found the element
      if ($hover_item.length&gt;0){
          selectBxPagerItem($hover_item);
      }
  });
  
  $('.slider-pager__item').on('click', function (event) {
      selectBxPagerItem($(this));
  });
  </code></pre>
  
  <p><strong>selectBxPagerItem()</strong> - is a selecting function.
  For a slider with colorbox on click, I have made a similar click emulation:</p>
  
  <pre><code>        $('.slider-for').parent().on('click', function (event) {
              var $hover_item = $('.slider-for__item:hover a');
              if (($hover_item.length&gt;0)&amp;&amp;(!window.slider_for_click_imitation)){
                  window.slider_for_click_imitation=true;
                  $hover_item.click();
              }
              window.slider_for_click_imitation=false;
          });
  
  </code></pre>
  
  <p><strong>UPDATE 2019.07.20:</strong>
  I've  found out recently, that previous solution doesn't work now.
  I've cheked it and discover, that inner elements have no <strong>:hover</strong> state;
  So, there is another soulution with <strong>mouseover</strong> event</p>
  
  <pre><code>/* A Chrome bx slider bug workaround */
  
  //A slide, that has the mouse pointer over
  window.bxslider_mouse_over_slide=null;
  $(function() {
      $('.slider-pager div').mouseover(
          function(event) {
              window.bxslider_mouse_over_slide=$(this);
          });
  
  });
  $('.slider-pager').parent().on('click', function (event) {
      //Check if we've got a slide under the mouse
      if ((window.bxslider_mouse_over_slide!=null)){
              $('.slider-pager__item').removeClass('active');
          window.bxslider_mouse_over_slide.addClass('active');
      }
  });
  </code></pre>
  
  <p>Making a workaround, I've found out that when I click on banner, a <strong>mouseover</strong> event triggers, and only then it handles a click event. So that that moment slide has no <strong>:hover</strong> state. So I just save last hovered banner.
  Check the solution: <a href="https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/" rel="nofollow noreferrer">https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/</a></p>