如何通过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,它似乎每次都有效.任何提示？

Answer 1

对我有用的是:

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

Answer 2

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

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

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

• 您可以选择将modal = true添加到查询字符串(例如#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true),以便关闭ThickBox将需要tb_remove()从ThickBox中调用该函数.请参阅隐藏模式内容示例,您必须单击是或否才能关闭ThickBox.

Answer 3

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

Answer 4

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

Answer 5

虽然这是一个非常古老的问题,但我发现更容易处理这项任务.它是由jquery UI团队开发的名为simulate的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下载它

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

没有经过测试,这个实际的剧本,但我之前使用过triggeret,而且他们工作得很好.

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

Answer 7

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

• 硒browserbot.js

寻找BrowserBot.prototype.triggerMouseEvent功能.