当前位置：文江博客话题详情

HTML jQuery onclick thickbox

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

发布于 2024-07-18 04:17:43 字数 372 浏览 9 评论 0原文

我在通过 jQuery 伪造锚点点击时遇到问题：为什么我的粗框在我第一次单击输入按钮时出现，但第二次或第三次则不出现？

这是我的代码：

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

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

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

I have a problem with faking an anchor click via jQuery:
Why does my thickbox appear the first time I click on the input button, but not the second or third time?

Here is my code:

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

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

It does always work when I click directly on the link, but not if I try to activate the thickbox via the input button. This is in FF. For Chrome it seems to work every time. Any hints?

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（17）

幽蝶幻影 2024-07-25 04:17:43

对我有用的是：

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

What worked for me was:

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

回复收藏 0 原文

此生挚爱伱 2024-07-25 04:17:43

尽量避免像这样内联 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 小部件，我在此处找到了说明：

说明：

创建一个链接元素 ( )
为链接指定一个值为 Thickbox 的类属性 (class="thickbox")
在链接的 href 属性中添加以下锚点：#TB_inline
在 href 属性中的 #TB_inline< /code> 将以下查询字符串添加到锚点：
?height=300&width=300&inlineId=myOnPageContent
更改值查询中相应的高度、宽度和 inlineId（inlineID 是包含您想要在 ThickBox 中显示的内容的元素的 ID 值。
您可以选择将 modal=true 添加到查询字符串（例如#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true），因此关闭ThickBox将需要从内部调用tb_remove()函数ThickBox。请参阅隐藏的模式内容示例，其中您必须单击“是”或“否”才能关闭 ThickBox。

Try to avoid inlining your jQuery calls like that. Put a script tag at the top of the page to bind to the click event:

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

Edit:

If you're trying to simulate a user physically clicking the link, then I don't believe that is possible. A workaround would be to update the button's click event to change the window.location in Javascript:

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

Edit 2:

Now that I realize that Thickbox is a custom jQuery UI widget, I found the instructions here:

Instructions:

Create a link element (<a href>)
Give the link a class attribute with a value of thickbox (class="thickbox")
In the href attribute of the link add the following anchor: #TB_inline
In the href attribute after the #TB_inline add the following query string on to the anchor:
?height=300&width=300&inlineId=myOnPageContent
Change the values of height, width, and inlineId in the query accordingly (inlineID is the ID value of the element that contains the content you would like to show in a ThickBox.
Optionally you may add modal=true to the query string (e.g. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) so that closing a ThickBox will require calling the tb_remove() function from within the ThickBox. See the hidden modal content example, where you must click yes or no to close the ThickBox.

回复收藏 0 原文

久夏青 2024-07-25 04:17:43

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

I've recently found how to trigger mouse click event via 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>

回复收藏 0 原文

逆光飞翔i 2024-07-25 04:17:43

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

this approach works on firefox, chrome and IE. hope it helps someone:

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) {}

回复收藏 0 原文

半步萧音过轻尘 2024-07-25 04:17:43

虽然这是一个非常老的问题，但我发现有一些更容易处理这项任务的方法。它是jquery UI团队开发的jquery插件，名为simulate。你可以将它包含在 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

Although this is very old question i found something easier to handle this task. It is jquery plugin developed by jquery UI team called simulate. you can include it after jquery and then you can do something like

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

works fine in chrome, firefox, opera and IE10.you can download it from https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

回复收藏 0 原文

你是年少的欢喜 2024-07-25 04:17:43

问题标题为“如何在 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 提供这个问题的最佳答案。

The question title says "How can I simulate an anchor click in jQuery?". Well, you can use the "trigger" or "triggerHandler" methods, like so:

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

Not tested, this actual script, but I've used trigger et al before, and they worked a'ight.

UPDATE
triggerHandler doesn't actually do what the OP wants. I think 1421968 provides the best answer to this question.

回复收藏 0 原文

破晓 2024-07-25 04:17:43

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

selenium-browserbot.js

查找 BrowserBot.prototype.triggerMouseEvent< /代码> 函数。

回复收藏 0 原文

扎心 2024-07-25 04:17:43

我相信你可以使用：

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

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

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

I believe you can use:

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

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

This will easily trigger the click function, without actually clicking on it.

回复收藏 0 原文

总以为 2024-07-25 04:17:43

您需要伪造锚点点击吗？来自厚盒网站：

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。

Do you need to fake an anchor click? From the thickbox site:

ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

If that is acceptable it should be as easy as putting the thickbox class on the input itself:

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

If not, I would recommend using Firebug and placing a breakpoint in the onclick method of the anchor element to see if it's only triggered on the first click.

Edit:

Okay, I had to try it for myself and for me pretty much exactly your code worked in both Chrome and 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>

The window pop ups no matter if I click the input or the anchor element. If the above code works for you, I suggest your error lies elsewhere and that you try to isolate the problem.

Another possibly is that we are using different versions of jquery/thickbox. I am using what I got from the thickbox page - jquery 1.3.2 and thickbox 3.1.

回复收藏 0 原文

当梦初醒 2024-07-25 04:17:43

您可以通过 jQuery 或在 HTML 页面代码中使用模仿链接 href 的操作来创建表单：

单击此处。< /代码>

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

You can create a form via jQuery or in the HTML page code with an action that mimics your link 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();

回复收藏 0 原文

_蜘蛛 2024-07-25 04:17:43

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

回复收藏 0 原文

囍孤女 2024-07-25 04:17:43

如果您不需要使用 JQuery，就像我不需要一样。我在 .click() 的跨浏览器功能方面遇到了问题。所以我用：

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

If you don't need to use JQuery, as I don't. I've had problems with the cross browser func of .click(). So I use:

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

回复收藏 0 原文

萌酱 2024-07-25 04:17:43

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

In Javascript you can do like this

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();
    }
}

and you can use it like

submitRequest("target-element-id");

回复收藏 0 原文

椵侞 2024-07-25 04:17:43

我使用 Jure 的脚本制作了这个，可以轻松地“单击”任意数量的元素。
我刚刚在 1600 多个项目上使用了 Google Reader，它运行得非常好（在 Firefox 中）！

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

Using Jure's script I made this, to easily "click" as many elements as you want.
I just used it Google Reader on 1600+ items and it worked perfectly (in Firefox)!

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

回复收藏 0 原文

动次打次papapa 2024-07-25 04:17:43

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

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

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

JQuery('#left').triggerHandler('click'); works fine in Firefox and IE7. I haven't tested it on other browsers.

If want to trigger automatic user clicks do the following:

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

回复收藏 0 原文

沧笙踏歌 2024-07-25 04:17:43

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

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

但这有效：

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

This doesn't work on android native browser to click "hidden input (file) element":

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

But this works:

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

回复收藏 0 原文

寄意 2024-07-25 04:17:43

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

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

In trying to simulate a 'click' in unit tests with the jQuery UI spinner I could not get any of the previous answers to work. In particular, I was trying to simulate the 'spin' of selecting the down arrow. I looked at the jQuery UI spinner unit tests and they use the following method, which worked for me:

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

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

jsonder

文章 0 评论 0

給妳壹絲溫柔

文章 0 评论 0

北笙凉宸

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

月下客

文章 0 评论 0

梦行七里

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文