jQuery - Create link element and click it

Question

I am trying to dynamically generate a link to Post a tweet on twitter and then click on it like this...

$("body").prepend("<a id=\"twitter_link\" href='https://twitter.com/intent/tweet'></a>");

$( "#twitter_link" ).click(function() {
  console.log( "Handler for .click() called." );
});

This is not working, where am i going wrong?

Function execution context? Possibly? `prepend` is an async operation so I guess the handler is getting attached *before* the actual element is rendered? — weirdpanda, Feb 08 '18 at 23:49

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Your code is 99% done!

Your new `a` element doesn't have text

Important

The click event it's necessary if you need to execute a logic when the new link is clicked, otherwise, that event it's unnecessary.

$("body").prepend("<a id=\"twitter_link\" href='https://twitter.com/intent/tweet'>Hello World</a>");

$( "#twitter_link" ).click(function(e) {
  e.preventDefault(); //This is just to show your logic is working!
  console.log( "Handler for .click() called." );  
  location.href = this.href; //This is to redirect to the specific page after any previous executed logic.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Resource

What's the best way to automatically redirect someone to another webpage?

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 08 '18 at 23:50

Ele

33,468
7
37
75

Although the log fires, the link doesn't open – fightstarr20 Feb 08 '18 at 23:52
@fightstarr20 the `e.preventDefault()` is just to show your logic is working. – Ele Feb 08 '18 at 23:53
@fightstarr20 I don't understand, you want to execute a logic when the new link is clicked? – Ele Feb 09 '18 at 00:00
Exactly, I am inserting some custom tweet text when a button is clicked. I want to then click the link so the person doesn't have to click again – fightstarr20 Feb 09 '18 at 00:03

score 1 · Answer 2 · answered Feb 08 '18 at 23:55

you can also try creating the element first, adding the event listener and then appending to the body

var $a = $("<a id=\"twitter_link\" href='#'>test</a>" );

$a.click(function(e) {
  e.preventDefault();
  console.log( "Handler for .click() called." );
});

$("body").prepend($a);

score 1 · Answer 3 · answered Feb 09 '18 at 00:01

If you actually want to automatically click the link, you have to call .click() on the element -- you're binding a click handler. Here's an example without jQuery adapted from a project I'm working on:

function clickLink(url) {
    let anchor = document.createElement('a');
    anchor.href = url;
    document.body.appendChild(anchor); // Firefox requires us to actually insert the element into the DOM before we can click it
    anchor.click();
    document.body.removeChild(anchor);
}

clickLink('https://stackoverflow.com')

Watch your devtools console though, because if you try linking to another domain you might get this error:

Refused to display 'https://www.google.ca/?gfe_rd=cr&dcr=0&ei=--R8WpqeLpTM8AeZoYbgAg' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

jQuery - Create link element and click it

3 Answers3

Your new a element doesn't have text

Important

Resource

Your new `a` element doesn't have text