Finding parent element in IE9

Question

I cant get this to work in IE9 Other versions are fine, fine in any browser. I need to add a class to the parent 'li' when you click in the text input.

$(document).on('focus', '.fieldSlick', function(){
    $(this).parents("li:first").addClass('input--filled');
});
$(document).on('blur', '.fieldSlick', function(){
    if(!$.trim(this.value).length){
        $(this).parents("li:first").removeClass('input--filled');
    }
});

This should be very simple, but IE9 isn't behaving. What am I missing? fiddle

Answer 1

You can try it with the closest()

$(document).on('focus', '.fieldSlick', function(){
  //$(this).parent().addClass('input--filled');
  $(this).closest("li").addClass('input--filled');
});

Example

Answer 2

Try to update your jQuery version to 2.1 or higher. Here is the Fiddle. The Code is still the same

$(document).on('focus', '.fieldSlick', function(){
  //$(this).parent().addClass('input--filled');
  $(this).parents("li:first").addClass('input--filled');
});
$(document).on('blur', '.fieldSlick', function(){
  if(!$.trim(this.value).length){
    $(this).parent().removeClass('input--filled');
  }
});