javascript - simulating a click on a -element in javascript

Question

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.

So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:

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

However, this doesnt seem to work in any browsers i tested.

Any idea?

score 5 · Accepted Answer

$('#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

score 2 · Accepted Answer

尝试这个

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

            });

score 1 · Accepted Answer

我假设您想#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>

score 1 · Accepted Answer

而不是使用

$(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!'); 
  })
});

score 0 · Accepted Answer

尝试

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

检查插件的源代码。

javascript - simulating a click on a -element in javascript

7 回答 7

Related

Reference