jquery - My focus and blur do not work with .live -

i had issue yesterday adding css class distant selector on focus: use prev distant selector html code:

<div class="row collapse">     <label for="">login</label>     <div class="large-1 medium-1 small-2 columns">         <span class="prefix"><i class="fa fa-user"></i></span>     </div>     <div class="large-11 medium-11 small-10 columns">         <input type="text" placeholder="" />     </div> </div> 

the jquery code works is:

$('input').focus(function() {     $(this).closest('.row').find('.prefix').addclass('prefix-focus'); }); 

but need remove class on focusout if input empty. switched .live:

$('').live({     focus: function() {         $(this).closest('.row').find('.prefix').addclass('prefix-focus');     },     blur: function() {         if(!$(this).val()) {             $(this).closest('.row').find('.prefix').removeclass('prefix-focus');         }     } }); 

but not work. not work:

$('input').live({     focus: function() {         $(this).closest('.row').find('.prefix').addclass('prefix-focus');     } }); 

any idea did wrong?

thanks lot.

as of jquery 1.7, .live() method deprecated , .on() has used.

this should work

$('input').on({     focus: function() {         $(this).closest('.row').find('.prefix').addclass('prefix-focus');     },     blur: function() {         if(!$(this).val()) {             $(this).closest('.row').find('.prefix').removeclass('prefix-focus');         }     } }); 

$('input').on({    focus: function() {      $(this).closest('.row').find('.prefix').addclass('prefix-focus');    },    blur: function() {      if (!$(this).val()) {        $(this).closest('.row').find('.prefix').removeclass('prefix-focus');      }    }  });

.prefix-focus {    border: 2px solid red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="row collapse">    <label for="">login</label>    <div class="large-1 medium-1 small-2 columns">      <span class="prefix"><i class="fa fa-user"></i></span>    </div>    <div class="large-11 medium-11 small-10 columns">      <input type="text" placeholder="" />    </div>  </div>

if want delegate events

$('body').on('focus', 'input', function() {     $(this).closest('.row').find('.prefix').addclass('prefix-focus'); }).on('blur', 'input', function() {     if(!$(this).val()) {       $(this).closest('.row').find('.prefix').removeclass('prefix-focus');     } }); 

$(document).on('focus', 'input', function() {    $(this).closest('.row').find('.prefix').addclass('prefix-focus');  }).on('blur', 'input', function() {    if (!$(this).val()) {      $(this).closest('.row').find('.prefix').removeclass('prefix-focus');    }  });

.prefix-focus {    border: 2px solid red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="row collapse">    <label for="">login</label>    <div class="large-1 medium-1 small-2 columns">      <span class="prefix"><i class="fa fa-user"></i></span>    </div>    <div class="large-11 medium-11 small-10 columns">      <input type="text" placeholder="" />    </div>  </div>

some references on

jquery's live() deprecated. use now?