jquery - 如何通过 jquery 模拟锚点点击？

Question

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

这是我的代码：

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

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

当我直接单击链接时，它总是有效，但如果我尝试通过输入按钮激活厚框，它就不会。这是在FF。对于 Chrome，它似乎每次都有效。有什么提示吗？

score 200 · Accepted Answer

200

对我有用的是：

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

于 2012-05-11T23:13:34.340 回答

score 124 · Accepted Answer

尽量避免像这样内联你的 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>

编辑：

如果您试图模拟用户物理单击链接，那么我认为这是不可能的。一种解决方法是更新按钮的click事件以更改window.locationJavascript：

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

编辑2：

现在我意识到Thickbox 是一个自定义的jQuery UI 小部件，我在这里找到了说明：

指示：

创建链接元素 ( <a href>)
给链接一个值为thickbox ( class="thickbox")的类属性
在href链接的属性中添加以下锚点：#TB_inline
在href属性中，#TB_inline将以下查询字符串添加到锚点上：

?height=300&width=300&inlineId=myOnPageContent
相应地更改查询中的 height、width 和 inlineId 的值（inlineID 是包含您希望在 ThickBox 中显示的内容的元素的 ID 值。
或者，您可以将 modal=true 添加到查询字符串（例如#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true），以便关闭厚框将需要tb_remove()从厚框内调用该函数。请参阅隐藏的模态内容示例，您必须单击是或否才能关闭厚框。

score 19 · Accepted Answer

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

score 9 · Accepted Answer

这种方法适用于 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) {}

score 8 · Accepted Answer

虽然这是一个非常古老的问题，但我发现一些更容易处理这项任务的东西。它是由 jquery UI 团队开发的 jquery 插件，称为模拟。您可以在 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下载它

score 6 · Accepted Answer

问题标题为“如何在 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>

未经测试，这个实际的脚本，但我以前用过triggeret al，他们工作得很好。

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

score 5 · Accepted Answer

I'd suggest to look at the Selenium API to see how they trigger a click on an element in a browser-compatible manner:

selenium-browserbot.js

Look for the BrowserBot.prototype.triggerMouseEvent function.

score 4 · Accepted Answer

我相信你可以使用：

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

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

这将很容易触发点击功能，而无需实际点击它。

score 2 · Accepted Answer

在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");

score 2 · Accepted Answer

你需要伪造一个锚点击吗？从厚箱网站：

可以从链接元素、输入元素（通常是按钮）和区域元素（图像映射）调用 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。我正在使用从thickbox 页面获得的内容-jquery 1.3.2 和thickbox 3.1。

score 2 · Accepted Answer

您可以通过 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();

score 2 · Accepted Answer

为了在登陆页面时模拟对锚点的点击，我只是使用 jQuery 为$(document).ready.无需复杂触发器的 scrollTop 属性设置动画，并且适用于 IE 6 和所有其他浏览器。

score 2 · Accepted Answer

如果你不需要使用 JQuery，我不需要。我的跨浏览器功能有问题.click()。所以我使用：

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

score 1 · Accepted Answer

使用我制作的 Jure 脚本，可以轻松地“单击”任意数量的元素。
我刚刚在 1600 多个项目上使用了它的谷歌阅读器，它运行良好（在 Firefox 中）！

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

这不适用于 android 本机浏览器单击“隐藏输入（文件）元素”：

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

但这有效：

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

score 0 · Accepted Answer

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

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

jquery - 如何通过 jquery 模拟锚点点击？

17 回答 17

指示：

Related

Reference