jQuery Невозможно прочитать свойство «toLowerCase» неопределенного

Question

Я читаю главу из PHP Ajax Cookbook. Вот код:

HTML:

<form class='simpleValidation'> 
     <div class='fieldRow'> 
      <label for='title'>Title *</label> 
      <input type='text' id='title' name='title' class='required'> 
     </div> 
     <div class='fieldRow'> 
      <label for='url'>URL</label> 
      <input type='text' id='url' name='url' value='http://'> 
     </div> 
     <div class='fieldRow'> 
      <label for='labels'>Labels</label> 
      <input type='text' id='labels' name='labels'> 
     </div> 
     <div class='fieldRow'> 
      <label for='textarea'>Text *</label> 
      <textarea id='textarea' class='required'></textarea> 
     </div> 
     <div class='fieldRow'> 
      <input type='submit' id='formSubmitter' value='Submit'> 
     </div> 
    </form> 

JQuery:

$(document).ready(function() {  
     var timerId = 0; 

     $('.required').keyup(function() { 
      clearTimeout(timerId); 

      timerId = setTimeout(function() { 
       ajaxValidation($(this)); 
      }, 200); 
     }); 
    }); 

    var ajaxValidation = function (object) { 
      var $this = $(object); 
      var param = $this.attr('name'); 
      var value = $this.val(); 

      $.get(
       'inputValidation.php', 
       {'param' : param, 'value' : value }, 
       function (data) { 
        if (data.status == 'OK') { 
         validateRequiredInputs(); 
        } else { 
         $this.addClass('failed'); 
        } 
       }, 
       'json' 
      ); 

      var validateRequiredInputs = function() { 
       var numberOfMissingInputs = 0; 

       $('.required').each(function(i) { 
        var $item = $(this); 
        var itemValue = $item.val(); 

        if (itemValue.length) { 
         $item.removeClass('failed'); 
        } else { 
         $item.addClass('failed'); 
         numberOfMissingInputs++; 
        } 
       }); 

       var $submitButton = $('#formSubmitter'); 

       if (numberOfMissingInputs > 0) { 
        $submitButton.prop('disabled', true) 
       } else { 
        $submitButton.prop('disabled', false) 
       } 
      } 
     } 

PHP (inputValidation.php):

<?php 
$result = array(); 

if (isset($_GET['param'])) { 
    $result['status'] = 'OK'; 
    $result['message'] = 'Input is valid!'; 
} else { 
    $result['status'] = 'ERROR'; 
    $result['message'] = 'Input IS NOT valid'; 
} 

echo json_encode($result) 
?> 

Когда я начинаю вводить в Title * поле ввода получить следующую ошибку с консоли: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Примечание: Я использую JQuery 2.2.1

До сих пор я проверил код неправильной орфографии, но не могу найти.

Answer 1

this бит в ajaxValidation($(this)) не так, как вы думаете: it's actually window, since it's being called by setTimeout().

Одно из решений состоит в назначении $(this) к переменной вне функции, например, так:

$('.required').keyup(function() { 
    clearTimeout(timerId); 
    var $this = $(this); 

    timerId = setTimeout(function() { 
     ajaxValidation($this); 
    }, 200); 
});