Dynamically create and "click" a link with jQuery

Question

I want to dynamically create an <a href="mailto:..."> element, then "click" it. All without modifying the page.

I'm trying this:

$('<a href="mailto:test@test.com">&nbsp;</a>').click();

...to no avail

Answer 1

Its not jquery, but it works just fine.

var link = document.createElement('a');
link.href = url;
document.body.appendChild(link);
link.click();    

Answer 2

To make it work with jQuery, you first need to select the DOM element inside the jQuery object.

$('body').append('<a id="link" href="mailto:test@test.com">&nbsp;</a>');
$('#link')[0].click();

Notice the [0]

fiddle: https://jsfiddle.net/fkwhvvhk/

Answer 3

Clicking on a link means changing window.location, so how about

window.location = "mailto:test@test.com";

Answer 4

.click() work with a DOM, not jQuery object

it should be:

$('<a href="mailto:test@test.com"></a>')[0].click();

Answer 5

Try something like this...

Demo: http://jsfiddle.net/wdm954/xtTGX/1

$('.a').append('<a class="b" href="mailto:test@test.com">&nbsp;</a>');
$('.b').click(function() {
    window.location = $(this).attr('href');
}).click();

Answer 6

I have been found some problems with a similar issue and I found the simplest way for me:

    var link = document.createElement('a');

    link.download = 'profile.png';
    link.href = '...';
    link.id = 'example';
    link.class = '...';

    document.body.appendChild(link);

    link.click();

In my case I lost a lot of time trying to do this with jquery, doing $('#example').click()but does not work for me. At least the problem was jquery, I did it without it. I hope that it can be help for somenone. Is a simple way to set an anchor to download an image and do click just after.

Answer 7

Yo can create the tag this way:

$('PARENT_TAG').append('<a id="dinamic_link" href="mailto:test@test.com">&nbsp;</a>');
//Now click it
$('#dinamic_link').click();

HTH!

Answer 8

why not just change the window location to the href of the link? Is there any specific reason you need to use a link?

Otherwise:

window.location = 'http://example.com';

Answer 9

$('#something').append('<a id="link" href="mailto:test@yourdomain.com"></a>');
$('#link').trigger('click');

Answer 10

I would say you should consider adding the href to a container (mostly div) using .append() and call .click()

$('parent_div').append('<a id="link" href="mailto:test@test.com">&nbsp;</a>');
//Now click it
$('#link').click();

Answer 11

It is not possible to simulate normal clicks. You can only trigger click event handlers that have been bound to an element..

As @Alex has posted, you can change the window.location to achieve the same effect..

Answer 12

Just been doing a tutorial on this!

$("[href='mailto:test@test.com']").click();

This should select all elements with a href attribute with "mailto:test@test.com" as its value.

www.w3schools.com/jquery/jquery_selectors.asp

Answer 13

you have to use .on and then call .click . Dynamically generated hyper reference does not work with simple .click()

Answer 14

If you want to use jQuery. This is basically the same answer as the answer from jBelanger:

$('body').append('<a id="link" href="mailto:test@test.com">&nbsp;</a>');
$('#link')[0].click();

The problem is $('#link')[0] might not exist YET! You have to wait for it to be created. How to do that? I found the answer here. The following worked for me:

$('body').append('<a id="link" href="mailto:test@test.com">&nbsp;</a>');
waitForElm('#link').then((elm) => { elm.click(); });

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

Answer 15

var link = document.createElement('<a>')
link.href = "mailto:test@test.com";
link.id = "hitme"
$('#hitme').click();