mailto: URL not working in jQuery bound event handler

Question

I have an icon that when clicked will fire off a mailto: URL. Seems simple enough, but it's not working. When debugging I click the icon and the event handler does fire and executes the code within it, but then does nothing. Why doesn't this work?

<i id="email-icon" class="fa fa-envelope"></i>

$("#email-icon").on("click", function () {
    window.location.href = "mailto:mail@example.org";
});

I have a feeling the event is getting canceled in jQuery somehow?

Seems to work fine for me: https://jsfiddle.net/RoryMcCrossan/213zs2w9/. Do you have any errors in the console, or some other code which is interfering with the event? Something attached to a parent element for example. Also, do you have a mail client installed on the machine? — Rory McCrossan, Jul 09 '16 at 19:05
jQuery has no say to what happens when you assign to location.href. The browser does have a say, and I can see why it wouldn't like this. — John Dvorak, Jul 09 '16 at 19:05
@RoryMcCrossan: I haven't tried in anything but Chrome yet. What browser are you using by chance? — razaross444, Jul 09 '16 at 19:06
@JanDvorak: You can see why it wouldn't like it? Do you see something wrong with it? Please explain. — razaross444, Jul 09 '16 at 19:07
@RoryMcCrossan: Wow. This is REALLY strange! Your fiddle doesn't work for me in Chrome 51 on Windows. When I execute it in Edge (IE), it then opens Chrome! I've never seen anything like this before. LOL — razaross444, Jul 09 '16 at 19:13
From that behaviour then I would guess the problem is due to what program the client machine attempts to open mail links in. In that case there's nothing you can do, as the developer — Rory McCrossan, Jul 09 '16 at 19:14
And who is marking this question down??? It's a valid question! — razaross444, Jul 09 '16 at 19:14
@RoryMcCrossan: Yep. As soon as I hit enter on my last comment about it opening Chrome, I went looking in my default program settings. That was it! Thanks for taking the time to fiddle this. Add an answer to this post so I can mark it as correct and give you credit. ;-) — razaross444, Jul 09 '16 at 19:21

score 0 · Answer 1 · answered Jul 09 '16 at 21:07

0

Try this:

<a href="mailto:mail@example.org"><i id="email-icon" class="fa fa-envelope"></i></a>

answered Jul 09 '16 at 21:07

arturas

1,027
1
9
26

score 0 · Answer 2 · edited May 23 '17 at 11:51

So, to answer my own question....

There was actually nothing wrong with my code. The problem lied in how my new machine was configured!

In looking at my default programs in Control Panel, I saw that Chrome was set as the default program to handle MAILTO protocol. :-(

I made Outlook the handler for that protocol and then it worked as expected. Not sure how that happened, but thought I'd post it in case someone else has this issue down the road.

Thank you to Rory McCrossan for investigating.

score 0 · Answer 3 · answered Jul 09 '16 at 22:10

0

try it to create direct link:

$("#email-icon").on("click", function () {
    var link = "mailto:mail@example.org";
    var obj = $("<a href=\"" + link + "\" target=\"_new\"><span></span></a>");
    obj.appendTo("body");
    obj.children("span:eq(0)").trigger("click");
    obj.remove();
});

answered Jul 09 '16 at 22:10

toto

1,180
2
13
30

I tried this and opens a new tab on chrome that puts on the nav bar: mailto:email@domain.com and does not execute any action – Juan Zamora Jan 11 '18 at 19:49
Hello Sorry for delay, You tried removing/without the attribute target=\"_new\" – toto Feb 10 '18 at 03:29

mailto: URL not working in jQuery bound event handler

3 Answers3