Функция щелчка или щелчка не работает внутри bxSlider с touchEnabled: true - PullRequest
Новая
       18

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

1 голос
/ 05 апреля 2019

Функция 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 SLIDER CODE 

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

JQUERY ON CLICK 

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

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

Спасибо

1 Ответ

0 голосов
/ 05 апреля 2019

Вместо события click я предлагаю использовать mousedown : 

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>
...