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

144

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

这是我的代码：

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

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

当我直接单击链接时，它始终有效，但是如果我尝试通过输入按钮激活thickbox，则无法正常工作。这是在FF。对于Chrome，它似乎每次都能正常工作。有什么提示吗？

jquery  html  onclick  thickbox 
— 王子
source
1
您在这里遗漏了代码。您显示给我们的锚没有与click事件关联的代码。该代码有什么作用？还有其他代码吗？
— 马特
1
@Matt如果您使用没有参数的click方法，则不再将其解释为事件绑定，它实际上将单击（就像您用鼠标单击一样）链接到该元素的元素。在这种情况下，单击输入元素时，也应单击ID为'thickboxId'的元素。
— KyleFarris
3
@KyleFarris：除非要单击的元素具有附加的onclick事件，否则click（）事件在Chrome或Safari上不起作用，并且该事件仅会触发该部分，而不会导航到href值。在上述情况下，他希望它导航到A标签的href属性，就像用户单击链接一样。
— 感性的

Answers:

123

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

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

说明：

  • 创建一个链接元素（<a href>）

  • 为链接赋予一​​个类属性，其值具有thickbox（class="thickbox"）

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

  • 在href属性之后，#TB_inline将以下查询字符串添加到锚点：

    ？height = 300＆width = 300＆inlineId = myOnPageContent

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

  • （可选）您可以将modal = true添加到查询字符串（例如#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true），以便关闭ThickBox将需要tb_remove()从ThickBox内部调用该函数。请参阅隐藏的模态内容示例，在该示例中必须单击“是”或“否”以关闭ThinBox。

— 约翰·拉施
source
点击处理程序中的window.location无法正常工作，因为thickbox无法正常工作。
— prinzdezibel
在第二个示例中，建议使用.prop()而不是attr()获取解析的URL。
— Kevin Bowersox 2014年
我很惊讶这是被接受的答案。点击触发器仅适用于本机DOM元素，不适用于jQuery包装器元素。@Stevanicus和评论以及其他一些SO帖子对此进行了讨论。答案应改为Stevanicus。
— 奥利弗
@Schollii-随时将其编辑为所需的正确性。
— 约翰·拉施（John Rasch）2014年
3
我的意思是，可接受的答案应该是@stevanicus的答案
— Oliver
194

对我有用的是：

$('a.mylink')[0].click()
— Stevanicus
source
1
。捐赠下一部分是一个类名。＃是一个ID。
— Stevanicus
3
如果需要输入，请使用focus代替click:)
— AndriusNaruševičius13年
这对我也适用，但是为什么有效？为什么$（'a.mylink'）[0] .click（）有效，但$（'a.mylink'）。eq（0）.click（）无效？
— 克里斯C
4
[0]指示数组的第一个元素-选择器在执行时返回0个或多个元素。不幸的是，.click()这似乎并不能直接在这里工作，因为貌似在框架中一致地将其他调用应用于来自选择器的元素集合。
— cfeduke 2014年
8
使用[0]或.get(0)相同。这些使用元素的DOM版本，而不是jQuery版本。.click()在这种情况下，该函数不是jQuery click事件，而是本机事件。
— Radley Sustaire
19

我最近发现了如何通过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>
— 朱瑞
source
1
我认为这在IE中不起作用，至少在7或8中不起作用，因为在文档上似乎没有createEvent方法。
— 杰里米
正如eagle所说，这在webkit浏览器中有效。但请注意，您并不是在这里真正使用jQuery（除了$选择）
— tokland 2010年
1
— daniloquio
9

这种方法适用于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) {}
— 达米安
source
我认为，由于具有交叉兼容性，因此非常有帮助，是更好的选择。我不喜欢将所有内容都包装在try / catch块中，但我知道这样做是为了级联每个浏览器的尝试。
— h0r53
8

尽管这是一个非常老的问题，但我发现更容易处理此任务。它是由jquery UI团队开发的jquery插件，称为Simulation。您可以在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下载

— Ruwanka Madhushan
source
的主要功能simulate()是它发送jQuery事件并触发本机浏览器操作。现在这是正确的答案+1
— Gone Coding 2015年
就像超级按钮一样工作，当用户单击我的Kendo网格中的按钮时，它可以让我在新标签页中打开页面。
— John Sully
6

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

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

UPDATE
triggerHandler实际上并没有执行OP想要的操作。我认为 1421968是这个问题的最佳答案。

— elo80ka
source
4

我相信您可以使用：

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

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

这将轻松触发点击功能，而无需实际点击它。

— 迪帕克
source
2

您是否需要伪造锚点？从thickbox网站：

可以从链接元素，输入元素（通常是按钮）和区域元素（图像映射）中调用ThickBox。

如果可以接受，那么就像将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。

— 蜡翅
source
是的，我需要伪造它，并且单击处理程序本身可以工作。但实际上，我根本没有设置onclick事件，并且它只能在第一次时起作用。但是，如果在thinboxId中处理了onclick，它将无法正常工作。
— prinzdezibel
我的意思是验证每次单击输入元素时，锚元素中的onclick是否已触发。哦，在上方查看我的编辑。
— 蜡翼
2

您可以通过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();
— 拉斯·米勒
source
此方法导致整个页面重新加载，而不是简单地跳转到锚点。此外，它还会添加“？” 链接到该网址，因此该页面变为example.com?#test而不是example.com＃test。在Chrome和Safari上进行了测试。
— 感性的
在FF中，它将很好地工作。在Webkit浏览器中，您将获得Senseful描述的网址。但这不是问题，不是吗？
— sdepold 2011年
2

为了模拟在登陆页面时对锚点的单击，我只使用了jQuery来动画“ $(document).ready.无需复杂的触发器”中的scrollTop属性，该方法适用于IE 6和其他所有浏览器。

— 朱利安
source
2

如果您不需要使用JQuery，那么我也不需要。我的跨浏览器功能遇到了问题.click()。所以我用：

eval(document.getElementById('someid').href)
— 克雷格
source
又快又脏，但为我工作。在jQuery中，这是eval（$（“＃someid”）。attr（“ href”））;
— mhenry1384'5
2

在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");
— 亚什帕尔·辛格拉（Yashpal Singla）
source
1

我使用Jure的脚本进行了此操作，以轻松地“单击”任意所需的元素。
我刚刚将它用于1600多个项目的Google阅读器，并且运行良好（在Firefox中）！

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});
— 弗雷坎特
source
我认为这在IE中不起作用，至少不是7或8，因为在文档上似乎没有createEvent方法。
— 杰里米
我认为document.createEventObject（）应该在IE中使用，但我没有尝试过。
— fregante
@ bfred.it：createEventObject在IE中，似乎更多的是创建一个事件对象以传递给处理程序，而不是调度一个合成事件。IE fireEvent可能更接近dispatchEvent，但它只会触发侦听器-不会触发默认的浏览器操作。但是，在IE中，您只能调用该click方法。
— theazureshadow
1

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

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

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);
— 辛格
source
1

这在Android本机浏览器上无法单击“隐藏的输入（文件）元素”：

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

但这有效：

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

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

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();
— wbdarby
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.