CODEWITHSUNDEEP
jquery
Nicolas
Nicolas

Reputation: 371

My focus and blur do not work with .live

I had this issue yesterday about adding a css class to a distant selector on focus: Use prev for a 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 that works is:

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

But I need to remove this class on focusout if the input is empty. So I switched to .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 it does not work. Even this does not work:

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

Any idea what I did wrong?

Thanks a lot.

Upvotes: 1

Views: 161

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

As of jQuery 1.7, the .live() method is deprecated and .on() has to be 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 you want to 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 this

jquery's live() is deprecated. What do I use now?

Upvotes: 1

Related Questions