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

ajaxValidation($(this))的this一位不是您所想的： 它实际上是window ，因为它是由setTimeout()调用的 。

一种解决方案是将$(this)分配给函数外部的变量，如下所示：

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

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