CODEWITHSUNDEEP
javascriptjqueryhref
Tomas
Tomas

Reputation: 59515

Modify target url in onclick handler

Is it possible to modify the target URL in the onclick handler? How?

I don't want to use things like window.location = ... because it changes the browsers' behaviour (click vs ctrl-click, opening in new tab, opening in particular window/frame etc...). I want a clean solution - just change the url and the rest should be done itself as it would normally be.

$(...).click(function () {
    if (check_some_condition) 
        // modify target url here...
        // do not want to do window.location= - this is not clean
        // as it changes the browsers' behaviour (ctrl-click, opening in particular window/frame etc.)
    return true;
});

Upvotes: 17

Views: 35415

Answers (5)

ANAND G
ANAND G

Reputation: 1

A lot of the answers including the top comment have missed out on an important point. If a user simply right clicks the URL to perhaps open in a new tab/window, this method won't work because you're directly requesting at the location specified by the 'href' URL instead of going through the onclick event.

You could try the same at this demo fiddle mentioned on Gourneau's post.

http://jsfiddle.net/skram/PtNfD/7/

$(document).ready (function () {
    $('#changeMe').one ('click', function (e) {
        this.href = "http://www.google.com";
    });
});

Upvotes: 0

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

Let us consider a hidden anchor tag

<a id="linkId" href="myPageToGo.html" class="thickbox" title="" style="visibility:hidden;">Link</a>

Then you can simulate the anchor click in your code...

$(...).click(function () {
    if (check_some_condition) 
        $('#linkId').click();
    return true;
});

EDIT - Alternative way

Wrap the element clicked inside a anchor tag...

$(...).click(function () {
    if (check_some_condition) 
        $(this).wrap('<a id="new1" />');
        $('#new1').click();
    return true;
});

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Edit: Updated code because the event handler script is executed first and then the default action takes place.

Added below version to show you that you can use .click as you didn't notice the quirks mode link I shared with you. DEMO

$(document).ready (function () {
    $('#changeMe'). click (function (e) {
        var goLucky = Math.floor(Math.random()*12);
        if (goLucky % 2 == 0) {
            this.href = "http://www.google.com";
        } else {
            this.href = "http://www.hotmail.com";
        }
    });
});

Commented e.preventDefault(); & $(this).click() as it is not required..

DEMO

$(document).ready (function () {
    $('#changeMe').one ('click', function (e) {
        //e.preventDefault();
        this.href = "http://www.google.com";
        //$(this).click();
    });
});

Upvotes: 12

Gourneau
Gourneau

Reputation: 12868

Try

​$(function(){
    $("#theLink").click(function(){
        $(this).attr("href","http://tnbelt.com");
    });
});​​​​

Upvotes: 21

Seabass
Seabass

Reputation: 1973

Yup.

$(this).attr('href', 'http://example.com/');

Upvotes: 1

Related Questions