How can I simulate a click to an anchor tag?
Here is a complete test case that simulates the click
event, calls all handlers attached (however they have been attached), maintains the "target"
attribute ("srcElement"
in IE), bubbles like a normal event would, and emulates IE's recursion-prevention. Tested in FF 2, Chrome 2.0, Opera 9.10 and of course IE (6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function fakeClick(event, anchorObj) {
if (anchorObj.click) {
anchorObj.click()
} else if(document.createEvent) {
if(event.target !== anchorObj) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var allowDefault = anchorObj.dispatchEvent(evt);
// you can check allowDefault for false to see if
// any handler called evt.preventDefault().
// Firefox will *not* redirect to anchorObj.href
// for you. However every other browser will.
}
}
}
</script>
</head>
<body>
<div onclick="alert('Container clicked')">
<a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById('link'))">
Fake Click on Normal Link
</button>
<br /><br />
<div onclick="alert('Container clicked')">
<div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div>
</div>
<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button>
</body>
</html>
Demo here.
It avoids recursion in non-IE browsers by inspecting the event object that is initiating the simulated click, by inspecting the target
attribute of the event (which remains unchanged during propagation).
Obviously IE does this internally holding a reference to its global event
object. DOM level 2 defines no such global variable, so for that reason the simulator must pass in its local copy of event
.
How to simulate anchor link click
Looks like your $("google_link_proxy")
selector is off. Try $("#google_link_proxy")
.
You also need to close the observe call with })
.
Those are the syntax errors with the code above though I don't think those functions are provided in jQuery by default.
Here is what I think you're after:
$("#google_link_proxy").click(function(event){
window.open($("#google_link").attr('href'),'_blank')
});
How can I simulate a click event on an anchor tag without actually calling click or refreshing?
It sounds like you're looking for a way to programatically redirect from JS rather than via UI interaction, in which case you need to use Router.go('ROUTE_NAME')
, as per the docs (you can use the route name as in pathFor
as an alternative to supplying the actual path).
Simulate user click on anchor tag with jQuery from console
This is a weird problem indeed. All of the usual ways to click don't work, as you've noticed. I'm surprised at the "answers" posted here since it's clear from just trying them that none of them work for this site you've linked.
Looking at the source code, it appears the site's JS does some strange things with event binding in a non-traditional way (for example, the show/hide menu event is bound to hamburger
on an ns.CLICK
event instead of a traditional click
event). There is also the strangeness of my browser's forward and back buttons changing whenever I click and re-click the menu manually, making me think something is strange with the way routing and history is implemented.
So, you're not going crazy:) I can't think of an easy way to trigger the click on the site, but from the JS we can also see that the click event is equivalent to toggling the hidden
class from ExtendedNav
. So if you want an equivalent of the action the click would do, you can call $('.ExtendedNav').toggleClass('hidden')
.
How can I simulate an anchor click via jquery?
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 thetb_remove()
function from within the ThickBox. See the hidden modal content example, where you must click yes or no to close the ThickBox.
Trigger a click on anchor tag with specifc div class
after searching & some RND i was able to reach the solution , here below is the answer of my question
jQuery( ".findme3" ).find( ".reviews_tab " ).children('a').trigger('click');
how to click an anchor tag from javascript or jquery
Use $('selector')[0]
, as $('selector')
returns a jQuery object, so $('selector').click()
will fire the click handler, while $('selector')[0].click()
would fire the actual click.
$(document).ready(function () {
$('#about')[0].click(); //$('#about').get(0).click();
});
Demo
Related Topics
How to Save Canvas as an Image With Canvas.Todataurl()
Cross-Browser Multi-Line Text Overflow With Ellipsis Appended Within a Fixed Width and Height
Hide Text in HTML Which Does Not Have Any HTML Tags
Google Maps API V3: How to Remove All Markers
Changing CSS Values With JavaScript
Encode HTML Entities in JavaScript
How to Simulate a Click by Using X,Y Coordinates in JavaScript
Contenteditable, Set Caret At the End of the Text (Cross-Browser)
Html Form Readonly Select Tag/Input
Disabling Browser Print Options (Headers, Footers, Margins) from Page
How Does the Paste Image from Clipboard Functionality Work in Gmail and Google Chrome 12+
How to Check Whether Google Maps Is Fully Loaded
Browser Detection Versus Feature Detection
How to Correctly Iterate Through Getelementsbyclassname
How to Increase Browser Zoom Level on Page Load
How to Get the Dom Element Which Contains the Current Selection
Using Html5/Canvas/JavaScript to Take In-Browser Screenshots