模拟 JavaScript 中 元素的点击

Question

对于网站，我使用 jQuery supersized gallery 脚本： http://buildinternet。 com/project/supersized/slideshow/3.2/demo.html

正如您在演示中看到的，右下角有一个小箭头按钮，用于切换缩略图栏。配置文件中没有选项可以在打开站点时自动将其混合在一起。

所以我想我必须模拟点击该按钮（该按钮是托盘按钮，请参阅 HTML）。我尝试了这样的事情：

<script>
$(function() {
    $('#tray-button').click();
});
</script>

但是，这似乎在我测试过的任何浏览器中都不起作用。

有什么想法吗？

Answer 1

$('#tray-arrow').click(function() {
 // prepare an action here, maybe say goodbye.
 //
 // if #tray-arrow is button or link <a href=...>
 // you can allow or disallow going to the link:
 // return true; // accept action
 // return false; // disallow 
});

$('#tray-arrow').trigger('click'); // this is a simulation of click

Answer 2

试试这个

$("#tray-arrow").live("click", function () {
               // do something

            });

Answer 3

我假设您想在页面加载时弹出缩略图栏#thump-tray。

方法如下：

找到文件 supersized.shutter.js 并找到以下代码：

// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
    $(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
    return false;
}, function() {
    $(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
    if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
    return false;
});

在其后面添加：

$(vars.tray_button).click();

---

不要忘记在您的页面中（插件中的 demo.html），更改

<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

为

<script type="text/javascript" src="theme/supersized.shutter.js"></script>

Answer 4

而不是使用

$(function(){
 //jquery magic magic
});

你可以尝试这个女巫将在加载整个页面（图像等）后发挥你的jquery魔法

$(window).load(function () {
  // jquery magic
});

并模拟你应该使用的点击 // 应该与 $('#tray-arrow').click( 相同）；

$('#tray-arrow').trigger('click',function(){ })

例子：

$(window).load(function () {
  $('#tray-arrow').trigger('click',function(){ 
      alert('just been clicked!'); 
  })
});

Answer 5

尝试

<script>
$(function() {
    $('#tray-arrow').click();
});
</script>

确保此代码是在您的轮播初始化之后。

Answer 6

这看起来像是触发时机的问题。该插件还会在文档加载时加载，因此当您尝试绑定事件侦听器时，元素可能尚未创建。
也许您需要在 theme._init 函数之类的地方添加监听器
http://buildinternet.com/project/supersized/docs.html#theme-init
或类似的地方。

Answer 7

问题可能是您的插件检测点击是由用户（真正的鼠标点击）发起的，还是通过代码发起的（通过使用 $('#id').click() 方法）。如果是这样，很自然的，通过代码点击锚元素是得不到任何结果的。

检查您的插件的源代码。