Не работает скрипт клик по объекту внутри bxslider

Атрибут id должен быть уникальным. Если Вы используете его несколько раз, событие клика сработает только на первом. Лучше добавьте play, например, в класс или атрибут data

Разметка:

<div>
    <div class="box">
        <img class="play" src="..." />
    </div>
    <div class="box">
        <img class="play" src="..." />
    </div>
</div>

Скрипт:

<script>
    $(function() {
        $(".play").click(function() {
            alert(1);
        });
    });
</script>

В случае, если будете использовать атрибут data:

Разметка будет такой:

<img data-play src="..." />

А скрипт таким:

$("[data-play]").click(function() {
});

Решением оказалось заменить событие click на mousedown, при этом функцию этого клика вложила в функцию слайдера:

$('.slider').bxSlider({
  $('#play').on ( 'mousedown', function(){
    alert ('Клик по play');
  }
});

Потом был интересный момент с pager. Он у меня был стандартный, не кастомный. Там я сделала то же самое, но клик по кнопкам пейджера не работал в мобильной версии. Получалось переключить слайд, но остановить видео, например, не выходило. Заработало после того, как вместо mousedown по пейджеру поставила touchend.

$('.new').on ( 'touchend', function(){
     //alert ('Клик по пейджеру, видео на паузе');
});

Класс $('.new') добавила через опцию Bx-слайдера onSliderLoad:

  onSliderLoad: function(currentIndex){
   $("body > div > div.bx-controls.bx-has-pager > div > div").addClass("new");
  }

Спасибо всем, особенно ВадимЛешкевич, за помощь. Надеюсь, мой ответ кому-то ещё пригодиться. Всё заработало!!!