与ResponsiveSlides一起使用时,单击功能不会触发

时间:2014-05-20 11:10:22

标签: javascript jquery html

我正在使用名为ResponsiveSlides.js v1.54的J Query滑块。

我正试图在文档准备好的时候点击一个单击功能,但它没有发生。

HTML

<ul class="rslides">
    <li><img class="thumb" src="http://images01.inmotico.com/313/523/3135232000RC/580X420/8079d3bd4e020363bcdbaebaa8bf55a6.JPG" name="primary" id="primary"> 
    </li>
  <li><img id="primary" class="thumb" src="http://images01.inmotico.com/318/270/318270100000/580X420/0f93b6672ccde6fdc78b19077df8ba25.jpg" name="primary"></li>
  <li><img src="http://images01.inmotico.com/313/523/3135232000RC/580X420/5c63a9d68cfc0d28f5ea8dc655258871.JPG" alt=""></li>
  <li><img src="http://images01.inmotico.com/313/523/3135232000RC/580X420/7eda3992653969535866af22ae122d7d.JPG" alt=""></li>
</ul>

SCRIPT

$(document).on('click', '.transparent-btns_nav',function(event){
alert('clicked');
});

$(document).ready(function(){
    $('.transparent-btns_nav').trigger('click');


     $(".rslides").responsiveSlides({

        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });

});

JSFIDDLE

正如您在我的脚本中看到的那样。点击功能被添加到元素。因此,当单击该元素时,警报应该正常工作...但是在加载页面时也应该弹出警报。哪个不起作用

提前致谢

1 个答案:

答案 0 :(得分:0)

我尝试了几件事,这就是它的工作原理

JSFIDDLE

我的解释如何修复它。

我正在初始化

$('.transparent-btns_nav').trigger('click'); 

之前的脚本

$(".rslides").responsiveSlides({

        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });
因此触发器发生在一个不存在的div上。所以现在这里的脚本将正常工作

$(document).on('click', '.transparent-btns_nav',function(event){
alert('clicked');
});

$(document).ready(function(){      
     $(".rslides").responsiveSlides({

        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });
    $('.transparent-btns_nav').trigger('click');

});

如果您同意我的回答,请告诉我。谢谢