«F не определено» с использованием живых событий

Question

Я получаю сообщение об ошибке и предполагаю, что это в моем синтаксисе.

Цель: Если пользователь на самом деле ничего не пишет в text_area, тогда заполнитеон возвращается со своей меткой.

Код:

$(".card_signup_form input").live('click', function(){
  $(this).css("color","#666666");
  $old_value = $(this).attr("value");
  $(this).attr("value", "")
  if ( $(this).live('keyup blur') && $(this).attr("value") == "" ) {
    $(this).attr("value", $old_value);
  };
});

Ошибка здравого смысла jQuery:

F is undefined

Answer 1

Я думаю, что ваша проблема здесь

  if ( $(this).live('keyup blur') ... ) {
   ...
  };

Live ищет функцию, AKA "F", для привязки которой вы не предоставили.Я бы предложил разделить ваши живые привязки на отдельные блоки кода.

Как указывалось другими, просто привязка при нажатии не будет работать для пользователей, которые перемещаются без мыши.

Answer 2

Вы можете сделать то же самое, просто указав обработчики событий размытия и фокуса (фокус будет обрабатывать щелчок).Вы также можете указать атрибут «default» и сравнить значение со значением по умолчанию.Я бы также указал класс css «по умолчанию» вместо непосредственного обращения к атрибутам (просто мой преф).

$(".card_signup_form input").live("focus", function()
{
     var $this = $(this);
     if($this.val() != $this.attr("default"))
     {
         $this.val("");
         $this.removeClass("default");
     }
}).live("blur", function()
{
    var $this = $(this);
     if($this.val() == "")
     {
         $this.val($this.attr("default"));
         $this.addClass("default");
     }
}
<style>
.default{
   color:#666666;
}
</style>

Answer 3

Так я обычно решаю эту проблему, у вас происходит множество событий live - не уверен, постоянно ли вы добавляете новые текстовые поля в DOM или нет.Если это так, возможно, придется принять немного другой подход.

$('input').focus(function()
{
    $(this).data('prev-val', $(this).val())
})
.blur(function()
{
    if ($.trim($(this).val()).length == 0)
    {
        $(this).val( $(this).data('prev-val') );
    }
});