Add class to body on dynamic element, remove after clicking again anywhere on page
<p>I want to add a class to the <code>&lt;body&gt;</code> tag to make the cursor a crosshair when clicking a button. When I click any where on the page, I then want this class to be removed. </p>

<p>Currently I click the button, the class is added, and then removed straight away.</p>

<pre><code>$('button').on('click', function() {
  $('body').addClass('changeCursor');
}

$('html').on('click', '.changeCursor', function(){
  $('body.changeCursor').removeClass('changeCursor');
});
</code></pre>