Question

bxSlider内部的onlick函数不起作用。

我尝试使用

$(".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();

点击查询

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

当我单击类mybutton的div时，没有任何反应。如果我将touchEnabled设置为：false，则一切正常。

谢谢

Answer 1

我建议使用 mousedown 代替 click 事件：

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>

带有touchEnabled的bxSlider内的onclick或click函数不起作用：true

1 个答案: