I need to disable the mouse Click event after clicking on a specific element, this is ready, but now I need to enable it after a few seconds or enable it with the Mouseleave event specifically. I have done the example but it is not working, why could that be happening?

```js
$(function(){

 var i = 0;

  // Click element
  $('#data').on('click', this, function(){
    i ++;
    $('#count').html(i);
    // Disable click
    $('#data').off('click');
    // After a while, we enable the click again
    setTimeout(function(){
      $('#data').on('click');
    }, 2000);
  });

 // Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, function(){
    $('#data').on('click');
  });

});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">Hello <span id="count"></span></div>
```