title: How to wrap the click event with some custom function
body: <p>I have a button called 'create project', when user click the button, i want 2 things to happen </p>
  
  <ol>
  <li>an ajax call to check if the user is allow to create a project</li>
  <li>if allowed, then execute the button as normal, if not, then pop up a modal dialog saying he is not allowed to create a new project. </li>
  </ol>
  
  <p>I have the following code</p>
  
  <pre><code>$('.create_project').click(function(e) {
     e.stopDefault();
     $.getJSON('/check_user_limit', function(data){
          if(data.allow_to_create_project){
             //trigger the click here
          }else{
             //modal here
          }
      }
  });
  </code></pre>
  
  <p>use 'trigger' in the above code won't work since it become a infinite loop. The unbind works the first time, but won't work the second time since the foo no longer bind to the function. </p>