jQuery 如何触发href元素上的点击事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7999806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger click event on href element
提问by MonsterMMORPG
I am trying to trigger click event on hyperlink with jQuery like the way below. Hyperlink does not have any id but it does have cssclass
我正在尝试使用 jQuery 触发超链接上的点击事件,如下所示。超链接没有任何 id 但它有 cssclass
$(document).ready(function () { $('.cssbuttongo').trigger('click'); });
The function above is not working. This is the hyperlink
上面的功能不起作用。这是超链接
<a href="hyperlinkurl" class="cssbuttongo">hyperlink anchor</a>
采纳答案by Feisty Mango
I do not have factual evidence to prove this but I already ran into this issue. It seems that triggering a click() event on an <a>
tag doesn't seem to behave the same way you would expect with say, a input button.
我没有事实证据来证明这一点,但我已经遇到了这个问题。似乎在<a>
标签上触发 click() 事件似乎与您期望的输入按钮的行为方式不同。
The workaround I employed was to set the location.href property on the window which causes the browser to load the request resource like so:
我采用的解决方法是在窗口上设置 location.href 属性,这会导致浏览器像这样加载请求资源:
$(document).ready(function()
{
var href = $('.cssbuttongo').attr('href');
window.location.href = href; //causes the browser to refresh and load the requested url
});
});
Edit:
编辑:
I would make a js fiddle but the nature of the question intermixed with how jsfiddle uses an iframe to render code makes that a no go.
我会做一个 js 小提琴,但问题的性质与 jsfiddle 如何使用 iframe 来呈现代码混杂在一起,这使得这行不通。
回答by Roman Starkov
The native DOM method does the right thing:
本机 DOM 方法做正确的事情:
$('.cssbuttongo')[0].click();
^
Important!
This works regardless of whether the href
is a URL, a fragment (e.g. #blah
) or even a javascript:
.
无论href
是 URL、片段(例如#blah
)还是javascript:
.
Note that this calls the DOM click
method instead of the jQuery click
method (which is very incomplete and completely ignores href
).
请注意,这会调用 DOMclick
方法而不是 jQueryclick
方法(这是非常不完整的并且完全忽略了href
)。
回答by Josh Crozier
In addition to romkyns's great answer.. here is some relevant documentation/examples.
除了 romkyns 的出色回答之外,这里还有一些相关的文档/示例。
DOM Elements have a native .click()
method.
DOM 元素有一个本地.click()
方法。
The
HTMLElement.click()
method simulates a mouse click on an element.When click is used, it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an
<a>
element to initiate navigation as if a real mouse-click had been received.(mdn reference)
该
HTMLElement.click()
方法模拟鼠标单击元素。当使用 click 时,它还会触发元素的 click 事件,该事件将向上冒泡到文档树(或事件链)上方的元素并触发它们的 click 事件。但是,单击事件的冒泡不会导致
<a>
元素启动导航,就像收到了真正的鼠标单击一样。(mdn 参考)
Relevant W3 documentation.
相关的W3 文档。
A few examples..
几个例子..
You can access a specific DOM element from a jQuery object: (example)
$('a')[0].click();
You can use the
.get()
method to retrieve a DOM element from a jQuery object: (example)$('a').get(0).click();
As expected, you can select the DOM element and call the
.click()
method. (example)document.querySelector('a').click();
您可以从 jQuery 对象访问特定的 DOM 元素:(示例)
$('a')[0].click();
您可以使用该
.get()
方法从 jQuery 对象中检索 DOM 元素:(示例)$('a').get(0).click();
正如预期的那样,您可以选择 DOM 元素并调用该
.click()
方法。(例子)document.querySelector('a').click();
It's worth pointing out that jQuery is notrequired to trigger a native .click()
event.
这是值得指出的是,jQuery是不是需要触发本地.click()
事件。
回答by Blazemonger
Triggering a click via JavaScript will not open a hyperlink. This is a security measure built into the browser.
通过 JavaScript 触发点击不会打开超链接。这是浏览器内置的安全措施。
See this questionfor some workarounds, though.
不过,请参阅此问题以了解一些解决方法。
回答by Alan Dong
Just want to let you guys know, the accepted answer doesn't always work.
只是想让你们知道,接受的答案并不总是有效。
Here's an example it will fail.
这是一个将失败的示例。
if <href='/list'>
如果 <href='/list'>
href = $('css_selector').attr('href')
"/list"
href = document.querySelector('css_selector').href
"http://localhost/list"
or you could append the href you got from jQuery to this
或者您可以将从 jQuery 获得的 href 附加到此
href = document.URL +$('css_selector').attr('href');
or jQuery way
或 jQuery 方式
href = $('css_selector').prop('href')
Finally, invoke it to change the browser current page's url
最后,调用它来改变浏览器当前页面的 url
window.location.href = href
or pop it out using window.open(url)
或使用弹出它 window.open(url)
Here's an example in JSFiddle.
这是 JSFiddle 中的一个示例。
回答by Henry
I was facing a similar issue how to click a button, instead of a link. It did not success in the methods .trigger('click') or [0].click(), and I did not know why. At last, the following was working for me:
我遇到了类似的问题,如何单击按钮而不是链接。它在 .trigger('click') 或 [0].click() 方法中没有成功,我不知道为什么。最后,以下内容对我有用:
$('#elementid').mousedown();