如何通过jquery模拟锚点击?

时间:2009-04-21 17:18:12

标签: jquery html onclick thickbox

我在使用jQuery伪造锚点击时遇到问题: 为什么我的厚箱出现在我第一次点击输入按钮时,而不是第二次或第三次出现?

这是我的代码:

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

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

当我直接点击链接时,它总是有效,但如果我尝试通过输入按钮激活厚箱,则无效。这是在FF。对于Chrome,它似乎每次都有效。任何提示?

17 个答案:

答案 0 :(得分:191)

对我有用的是:

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

答案 1 :(得分:122)

尽量避免像这样内联你的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事件以更改Javascript中的window.location

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

编辑2:

现在我意识到Thickbox是一个自定义的jQuery UI小部件,我找到了here的说明:

说明:

  • 创建一个链接元素(<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将需要从ThickBox中调用tb_remove()函数。请参阅隐藏模式内容示例,您必须单击“是”或“否”才能关闭ThickBox。

答案 2 :(得分: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>

答案 3 :(得分:8)

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

答案 4 :(得分: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等人,他们一直在工作。

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

答案 5 :(得分:6)

虽然这是一个非常古老的问题,但我发现更容易处理这项任务。它是由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下载

答案 6 :(得分:5)

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

查找BrowserBot.prototype.triggerMouseEvent函数。

答案 7 :(得分:4)

我相信你可以使用:

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

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

这很容易触发点击功能,而不会实际点击它。

答案 8 :(得分: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。

答案 9 :(得分: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");

答案 10 :(得分:2)

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

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

答案 11 :(得分:2)

要在登陆页面时模拟锚点击,我只是使用jQuery为$(document).ready.中的scrollTop属性设置动画,不需要复杂的触发器,这适用于IE 6和其他所有浏览器。 / p>

答案 12 :(得分: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();

答案 13 :(得分:1)

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

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

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

答案 14 :(得分:1)

使用Jure的脚本我做了这个,轻松地“点击”了你想要的任意数量的元素 我刚刚在1600多种商品上使用了谷歌阅读器,它完美运行(在Firefox中)!

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

答案 15 :(得分:0)

这不适用于Android原生浏览器点击&#34;隐藏输入(文件)元素&#34;:

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

但这有效:

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

答案 16 :(得分:0)

尝试模拟“点击”按钮。在使用jQuery UI微调器的单元测试中,我无法获得任何以前的工作答案。特别是,我试图模拟&#39;旋转&#39;选择向下箭头。我查看了jQuery UI spinner unit tests,他们使用以下方法,这对我有用:

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