親にクラスを適用しようとしています

Question

入力フィールドのフォーカスのある要素の親にクラスを追加しようとしています。入力フィールドに焦点が当てられていますが、フィールドが追加されているので、フォーカスを.parent（）を使用して全体に丸める必要があります。私は以下にいくつかのことを試しましたが、うまく動作しません。ここで

はHTMLである：ここでは

<div class="input-group"> 
     <span class="input-group-addon">£</span> 
     <input type="text" class="form-control mort-calc-field comma" id="pp"> 
    </div> 

はjQueryのです：代わりにあなたがfocusinを使用する必要がonfocusの

$(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'); 
    }); 
    }); 

Answer 1

試用：

$(document).ready(function(){ 
    $('.mort-calc-field').focus(function(){ 
    $(this).parent().addClass('calc-box-shadow'); 
    }); 
    $('.mort-calc-field').blur(function(){ 
    $(this).parent().removeClass('calc-box-shadow'); 
    }); 
    }); 

Answer 2

：

$(document).ready(function() { 
 
    $('.mort-calc-field').focusin(function() { 
 
    $(this).parent().addClass('calc-box-shadow'); 
 
    }); 
 
    $('.mort-calc-field').focusout(function() { 
 
    $(this).parent().removeClass('calc-box-shadow'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <span class="input-group-addon">£</span> 
 
    <input type="text" class="form-control mort-calc-field comma" id="pp"> 
 
</div>