如何通过 jquery 模拟锚点击？

我有一个通过 jQuery 伪造锚点击的问题: 为什么我第一次点击输入按钮的时候我的增厚框出现了，而第二次或第三次却没有？

这是我的代码:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />


<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

当我直接点击链接的时候它总是工作的，但是如果我试图通过输入按钮来激活增厚框的时候它就不工作了。这是在 FF。对于 Chrome 来说，它似乎每次都能正常工作。有线索吗？

290868 次浏览
小开
最佳答案

尽量避免像那样内联 jQuery 调用。在页面顶部放置一个 script 标记，以绑定到 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>

编辑:

如果你试图模拟一个用户物理点击链接，那么我认为这是不可能的。一个变通方法是更新按钮的 click事件以改变 Javascript 中的 window.location:

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

编辑2:

现在我意识到 Thickbox 是一个自定义的 jQuery UI 小部件，我找到了指令 给你:

说明:

  • 创建链接元素(<a href>)

  • 为链接提供一个 class 属性，其值为稠盒(class="thickbox")

  • 在链接的 href属性中添加以下锚: #TB_inline

  • 在 #TB_inline之后的 href属性中，向锚添加以下查询字符串:

    高度 = 300 & width = 300 & inlineId = myOnPageContent

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

  • 您可以选择向查询字符串(例如 #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true)添加 mode = true，这样关闭 ThickBox 将需要从 ThickBox 内部调用 tb_remove()函数。参见隐藏模态内容示例，您必须在其中单击 yes 或 no 才能关闭 ThickBox。

小开

你需要假装点击一下锚吗:

可以从 link 元素、 input 元素(通常是一个按钮)和 area 元素(图像映射)调用 ThickBox。

如果这是可以接受的，那么就应该像在输入本身上添加稠盒类一样简单:

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

如果没有，我建议使用 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>

无论我单击输入还是锚元素，窗口都会弹出。如果上面的代码对您有效，我建议您的错误在其他地方，并尝试隔离问题。

另一个可能的原因是我们使用了不同版本的 jquery/thickbox。我使用的是我从稠盒页面中得到的内容—— jquery 1.3.2和稠盒3.1。

小开

题目是“如何在 jQuery 中模拟锚点击?”.您可以使用“触发器”或“触发处理程序”方法，如下所示:

<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>

没有测试，这个实际的脚本，但我以前用过 trigger等，他们工作得很好。

更新
triggerHandler实际上并没有做 OP 想要做的事情。我认为 1421968为这个问题提供了最好的答案。

小开

我最近发现了如何通过 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>
小开

我建议查看 Selenium API，看看它们是如何以浏览器兼容的方式触发对元素的点击:

查找 BrowserBot.prototype.triggerMouseEvent函数。

小开

我使用 Jure 的脚本做了这个，可以轻松地“单击”任意多个元素。
我只是在1600多个条目中使用了 Google 阅读器，它工作得非常完美(在 Firefox 中) ！

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

你可以通过 jQuery 或者 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();
小开

JQuery('#left').triggerHandler('click');在 Firefox 和 IE7中运行良好，我还没有在其他浏览器上测试过。

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

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

为了模拟在页面上着陆时点击一个锚点，我只是使用 jQuery 来动画 $(document).ready.中的 scrollTop 属性，不需要复杂的触发器，这在 IE6和其他浏览器上都可以工作。

小开

这种方法适用于 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 的话。.click()的跨浏览器功能出了点问题。所以我用:

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

我相信你可以用:

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


$('#yourLink').trigger('click');

这将很容易触发 click 函数，而不需要实际单击它。

小开

对我起作用的是:

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

在 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 UI 团队开发的 jquery 插件，名为 Simulat。您可以在 jquery 之后包含它，然后您可以执行类似

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

可以在 chrome，firefox，Opera 和 IE10中正常工作。你可以从 https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js下载

小开

这在 android 本地浏览器上不能点击“隐藏的输入(文件)元素”:

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

但这种方法是有效的:

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

在尝试用 jQuery UI 微调器模拟单元测试中的“单击”时，我无法得到以前的任何答案。特别是，我试图模拟选择向下箭头的“旋转”。我查看了 单元测试，他们使用以下方法，这对我很有效:

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

提交答案