我怎样才能模拟通过jQuery的锚点击?

我有一个通过jQuery伪造锚点的问题:为什么我的第一次点击inputbutton时,我的密码箱出现,但不是第二次或第三次?

这是我的代码:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" /> <a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a> 

当我直接点击链接时,它总是工作,但是如果我尝试通过inputbutton激活thickbox,则不会。 这是FF。 对于Chrome,似乎每次都有效。 任何提示?

17 Solutions collect form web for “我怎样才能模拟通过jQuery的锚点击?”

尽量避免内联你的jQuery调用。 将页面顶部的脚本标记绑定到click事件:

 <script type="text/javascript"> $(function(){ $('#thickboxButton').click(function(){ $('#thickboxId').click(); }); }); </script> <input id="thickboxButton" type="button" value="Click me"> <a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a> 

编辑:

如果你试图模拟用户点击链接,那么我不相信这是可能的。 解决方法是更新button的click事件以更改JavaScript中的window.location

 <script type="text/javascript"> $(function(){ $('#thickboxButton').click(function(){ window.location = $('#thickboxId').attr('href'); }); }); </script> 

编辑2:

现在我意识到Thickbox是一个自定义的jQuery UI部件,我在这里find了说明:

说明:

  • 创build一个链接元素( <a href>
  • 为链接指定一个类的属性,其值为thickbox( class="thickbox"
  • 在链接的href属性中添加以下锚点: #TB_inline
  • #TB_inline之后的href属性中,将以下查询string添加到锚点:

    ?高度= 300&宽度= 300&inlineId = myOnPageContent

  • 相应地更改查询中的height,width和inlineId的值(inlineID是包含要在ThickBox中显示的内容的元素的ID值。

  • 可选地,您可以将modal = true添加到查询string(例如, #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true ),以便closuresThickBox将需要从tb_remove()内调用tb_remove()函数。 查看隐藏的模式内容示例,您必须单击“是”或“否”来closuresThickBox。

对我有效的是:

 $('a.mylink')[0].click() 

我最近发现如何通过jQuery触发鼠标点击事件。

  <script type="text/javascript"> var a = $('.path > .to > .element > a')[0]; var e = document.createEvent('MouseEvents'); e.initEvent( 'click', true, true ); a.dispatchEvent(e); </script> 

这种方法适用于Firefox,Chrome和IE。 希望它有助于某人:

 var comp = document.getElementById('yourCompId'); try { //in firefox comp.click(); return; } catch(ex) {} try { // in chrome if(document.createEvent) { var e = document.createEvent('MouseEvents'); e.initEvent( 'click', true, true ); comp.dispatchEvent(e); return; } } catch(ex) {} try { // in IE if(document.createEventObject) { var evObj = document.createEventObject(); comp.fireEvent("onclick", evObj); return; } } catch(ex) {} 

问题标题说:“我怎样才能模拟jQuery中的锚定点击?”。 那么,你可以使用“trigger”或“triggerHandler”方法,如下所示:

 <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/thickbox.js"></script> <script type="text/javascript"> $(function() { $('#btn').click(function() { $('#thickboxId').triggerHandler('click'); }) }) </script> ... <input id="btn" type="button" value="Click me"> <a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a> 

没有testing,这个实际的脚本,但我之前使用过trigger等,他们工作'一个'。

UPDATE
triggerHandler实际上并没有做OP所需要的。 我认为1421968提供了这个问题的最佳答案。

我build议看一下Selenium API,看看它们如何以浏览器兼容的方式触发一个元素的点击:

  • seleniumbrowserbot.js

查找BrowserBot.prototype.triggerMouseEvent函数。

虽然这是非常古老的问题,我发现更容易处理这个任务。 这是由jQuery UI团队开发的jquery插件,名为simulate。 你可以在jQuery之后包含它,然后你可以做类似的事情

 <a href="http://stackoverflow.com/"></a> $('a').simulate('click'); 

在铬,火狐,歌剧和IE10工作正常。你可以从https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js下&#x8F7D;

我相信你可以使用:

 $('#yourLink').bind('click', function() { //Do something over here }); $('#yourLink').trigger('click'); 

这将很容易触发点击function,而没有实际点击它。

你需要假锚点击? 从thickbox网站:

可以从链接元素,input元素(通常是button)和区域元素(图像映射)调用ThickBox。

如果这是可以接受的,应该像将thickbox类放在input本身一样简单:

 <input id="thickboxButton" type="button" class="thickbox" value="Click me"> 

如果不是的话,我会build议使用Firebug,并在锚点元素的onclick方法中放置一个断点,看它是否仅在第一次点击时触发。

编辑:

好吧,我不得不为自己和我自己尝试一下你的代码在Chrome和Firefox中的工作。

 <html> <head> <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /> </head> <body> <script src="jquery-latest.pack.js" type="text/javascript"></script> <script src="thickbox.js" type="text/javascript"></script> <input onclick="$('#thickboxId').click();" type="button" value="Click me"> <a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a> </body> </html> 

无论点击input还是锚点元素,都会popup窗口。 如果上面的代码适合你,我build议你的错误在别处,而你试图隔离这个问题。

另一个可能是我们正在使用不同版本的jquery / thickbox。 我正在使用从thickbox页面获得的内容 – jquery 1.3.2和thickbox 3.1。

你可以通过jQuery创build一个表单,或者在HTML页面代码中用一个模仿你的链接的动作href:

<a id="anchor_link" href="somepath.php">click here</a>.

 var link = $('#anchor_link').attr('href'); $('body').append('<form id="new_form" action="'+link+'"></form>'); $('#new_form').submit(); 

使用Jure的脚本,我可以轻松地“点击”尽可能多的元素。
我刚刚使用它的谷歌阅读器上的1600+项目,它完美(在Firefox中)!

 var e = document.createEvent('MouseEvents'); e.initEvent( 'click', true, true ); $(selector).each(function(){this.dispatchEvent(e);}); 

为了在页面上着陆时模拟一个锚点,我只是用jQuery来为$(document).ready.的scrollTop属性设置animation$(document).ready. 不需要复杂的触发器,并且适用于IE 6和所有其他浏览器。

如果你不需要使用JQuery,我不这样做。 我遇到了.click()的跨浏览器function问题。 所以我使用:

 eval(document.getElementById('someid').href) 

在Javascript中,你可以这样做

 function submitRequest(buttonId) { if (document.getElementById(buttonId) == null || document.getElementById(buttonId) == undefined) { return; } if (document.getElementById(buttonId).dispatchEvent) { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); document.getElementById(buttonId).dispatchEvent(e); } else { document.getElementById(buttonId).click(); } } 

你可以像使用它

 submitRequest("target-element-id"); 

JQuery('#left').triggerHandler('click'); 在Firefox和IE7中工作正常。 我没有在其他浏览器上testing过。

如果要触发自动用户点击,请执行以下操作:

 window.setInterval(function() { $('#left').triggerHandler('click'); }, 1000); 

这不适用于Android本机浏览器点击“隐藏的input(文件)元素”:

 $('a#swaswararedirectlink')[0].click(); 

但是这个工作:

 $("#input-file").show(); $("#input-file")[0].click(); $("#input-file").hide(); 

在尝试使用jQuery UI微调模拟unit testing中的“单击”时,我无法获得任何以前的答案。 特别是,我试图模拟select向下箭头的“旋转”。 我看着jQuery UI微调器unit testing ,他们使用下面的方法,它为我工作:

 element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();