Javascript onblur not working properly
<p>I'm trying to create a function that will allow a div to be edited and when no longer focused (like clicking outside the element), it should execute a function.</p>

<p>When testing this in a fiddle, the expected response does not occur. Instead, when the element is clicked, it both makes the content editable and performs the onblur function at the same time.</p>

<p>Any idea why this is happening?</p>

<p><a href="https://jsfiddle.net/kz29f77z/" rel="nofollow">https://jsfiddle.net/kz29f77z/</a></p>

<pre><code>&lt;div id="targetdiv"&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/p&gt;
&lt;/div&gt;


$('#targetdiv').click(function(){
    this.setAttribute('contenteditable', 'true');
    this.onblur(alert());
});
</code></pre>