Блог

Главная - Вопросы по программированию - Функция Onclick или click не работает внутри bxSlider с touchEnabled: true

Функция Onclick или click не работает внутри bxSlider с touchEnabled: true

#jquery #bxslider

#jquery #bxslider

Вопрос:

Функция onlick внутри bxSlider не работает.

Я пытался использовать 

 $(".mybutton").on('click', function() { console.log('Hello word')});

пытался использовать onlick="trythis() , но ничего не работает.

HTML-КОД

 <ul class="productSlider">
    <li>Image 1 <div class="mybutton">click me</div></li>
    <li>Image 2 <div class="mybutton">click me</div></li>
    <li>Image 3 <div class="mybutton">click me</div></li>
</ul>

КОД СЛАЙДЕРА JQUERY

 var  mySlider =  $('.productSlider').bxSlider({
    pager:false,
    controls:false,
    autoplay:true,
    shrinkItems:true,
    slideMargin:10,
    touchEnabled: true,
});
mySlider.reloadSlider();

JQUERY ПО ЩЕЛЧКУ

 $('.mybutton').on('click', function(){
    console.log('Hello Word');
})

Когда я нажимаю на div с классом mybutton, ничего не происходит. Если я установлю touchEnabled: false, все будет работать нормально.

Спасибо

Комментарии:

1. Находится внутри footer.php внутри document.ready

2. bxSlider может останавливать события для внутренних элементов.

3. если я добавлю touchEnabled: false, все будет работать нормально. но мне нужен touchEnable: true…

4. Я обновил вопрос, надеюсь, что кто-нибудь сможет мне помочь… К сожалению, это не мой сайт, и я впервые использую bxSlider

5. Возможно, вам придется переключать ползунки. Плавность хорошая. Я использую события щелчка на изображениях с его помощью.

Ответ №1:

Вместо события щелчка я предлагаю использовать наведение мыши:

 var  mySlider =  $('.productSlider').bxSlider({
    pager:false,
    controls:false,
    autoplay:true,
    shrinkItems:true,
    slideMargin:10,
    touchEnabled: true,
});
mySlider.reloadSlider();
$('.mybutton').on('mousedown', function(){
    console.log('Hello Word');
})  
 .mybutton {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    max-width: 100px;
    padding: 20px;
    text-align: center;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.js"></script>
<ul class="productSlider">
    <li>Image 1 <div class="mybutton">click me</div></li>
    <li>Image 2 <div class="mybutton">click me</div></li>
    <li>Image 3 <div class="mybutton">click me</div></li>
</ul>