title: Trying to apply a class to a parent
body: <p>I'm trying to add a class to a parent of an element on focus on an input field. There is a focus on the input field, but as there is a field add on I want the focus to be round the whole thing hence using the .parent(). I've tried the below and a few other things but can't get it to work. </p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>    &lt;div class="input-group"&gt;
           &lt;span class="input-group-addon"&gt;£&lt;/span&gt;
           &lt;input type="text" class="form-control mort-calc-field comma" id="pp"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>   $(document).ready(function(){
       $('.mort-calc-field').onfocus(function(){
       $(this).parent().addClass('calc-box-shadow');
       });
       $('.mort-calc-field').focusout(function(){
       $(this).parent().removeClass('calc-box-shadow');
       });
     });
  </code></pre>