Alex
Alex

Reputation: 147

Code to update HTML link after one click?

I am looking for a code, which I can put inside a standard HTML href link - that, once the link is clicked, will immediately update a portion of the link in real-time.

Something like:

<a href="http://example.com/<?php code(); ?>/">Example</a>

Will at first print:

<a href="http://example.com/page1/">Example</a>

And so after it being clicked once, it'll instantly change to:

<a href="http://example.com/page1-clicked/">Example</a>

Anyone got anything simple up the sleeve for that?

Thanks!

Upvotes: 0

Views: 1874

Answers (2)

gabber
gabber

Reputation: 100

using JQuery's one event handler to change the link only once:

$(function () {
    $('a').one(function (event) {
        var elem = $(this);
        var before = elem.attr('href');
        var after = before + '-clicked/';
        elem.attr('href', after);
    })
});

Upvotes: 0

Wezy
Wezy

Reputation: 667

First include JQuery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

Give your link an id

<a id="link" href="http://example.com/page1/">Example</a>

Use the link in your JQuery code

$(document).ready(function()    {
    $(document).on("click", "#link", function() {
        $(this).attr("href", "http://example.com/page1-clicked/");
    });
});

edit

I you want to do the same with many links give your link a class

<a class="link" href="http://example.com/page1/">Example</a>

Then change the JQuery code to

$(document).ready(function()    {
    $(document).on("click", ".link", function() {
        $(this).attr("href", "http://example.com/page1-clicked/");
    });
});

Upvotes: 3

Related Questions