How to Simulate a Click to an Anchor Tag

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

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



Leave a reply



Submit