Question

昨天我有一个关于将css类添加到焦点上的远处选择器的问题：Use prev for a distant selector HTML代码：

<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>

有效的jQuery代码是：

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

但是如果输入为空，我需要在focusout上删除这个类。所以我切换到了.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');
        }
    }
});

但它不起作用。即使这样也行不通：

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

知道我做错了吗？

非常感谢。

Answer 1

从jQuery 1.7开始，不推荐使用.live（）方法，并且必须使用.on（）。

这应该有效

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您想委派活动

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

关于此

的一些参考资料

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

我的焦点和模糊不适用于.live

1 个答案: