This is more or less an icon on the page that when clicked does something, but the icon on the page is currently an anchor. I can change this to a div (all the rest of the icons are divs for that matter in my UI), but for some reason the following doesn't work.

Why does the first click register nothing?

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    let URLObj = window.URL || window.webkitURL;
    ev.target.href = URLObj.createObjectURL(blob)
    ev.target.download = "untitled.png";
  });
}

<script src=".1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

This is more or less an icon on the page that when clicked does something, but the icon on the page is currently an anchor. I can change this to a div (all the rest of the icons are divs for that matter in my UI), but for some reason the following doesn't work.

Why does the first click register nothing?

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    let URLObj = window.URL || window.webkitURL;
    ev.target.href = URLObj.createObjectURL(blob)
    ev.target.download = "untitled.png";
  });
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

Fiddle to see behavior: https://jsfiddle/udbq3fb7/

• javascript
• jquery
• canvas
• blob

• If you inspect the element in your browser, you'll see it starts off without an href attribute (or just look at how you defined the source). After you click it the first time, you are setting the href on it. It then knows where to go for the second click. – Taplar Commented Jan 2, 2018 at 1:58
• jquery is in my code. look at the fiddle it is already referencing it. I didn't update the question with the code snippet, you did, which the snippet doesn't allow library additions. – simon Commented Jan 2, 2018 at 1:59
• 1 Including the logic to reproduce the issue on site, rather than only linking to an external paste service, is preferred. – Taplar Commented Jan 2, 2018 at 2:00
• 1 When the asynchronous toBlob's callback fires, your click event is long time dead. The default behavior will have been executed already, and simply overriding your <a> href's would have no direct effect. You would have to trigger yourself your <a>'s click() method, but it will create an infinite loop of save... So better use an new anchor, or even better, a library that would even handle quirks. – Kaiido Commented Jan 2, 2018 at 2:00
• Thanks Kaiido I'll get back to you on trying to create a new element inside the callback. – simon Commented Jan 2, 2018 at 2:07

2 Answers 2

Through much trial and effort, without using a 3rd party, here is an answer that works too:

$('#a').click(save);

function save(ev) {
   $('#canvas')[0].toBlob((blob) => {
        let URLObj = window.URL || window.webkitURL;
        let a = document.createElement("a");  
        a.href = URLObj.createObjectURL(blob);
        a.download = "untitled.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
   });
}

fiddle: https://jsfiddle/rkqkr47w/

Here is a walk-through the current situation:

1. User clicks.
2. Event gets dispatched in the document.
3. EventHandlers fire [if any].
4. default click behavior happens [if not prevented in 3.].

Now, what your code is trying to do is to overwrite the default behavior of the click (4.) action, by changing your <a>'s href in the event handlers (3.).

This trick normally works, because 3. happens before 4., but in your case, you are calling an asynchronous method in 3., and the href is only changed after your async callback gets called.

So you have
...
3. Canvas.toBlob(callback)
4. default click behavior happens
...
n. callback fires (change default behavior)

When your callback gets called, your click event is long dead, and changing its href will have incidence only on the next click.

You could call directly the <a>'s click method inside this callback, but it would lead to an infinite loop, except if you remove the event handler and reassign it again, but it would probably be easier to create a new <a> element altogether, that you would remove afterward, and even easier to use a library like FileSaver.js which does exactly this along with handling some quirks in older browsers.

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    saveAs(blob, "untitled.png");
  });
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>