jQuery无法读取未定义的属性"toLowerCase"

问题描述

我正在阅读PHP Ajax Cookbook的一章.这是代码:

I am reading a chapter from PHP Ajax Cookbook. Here is the code:

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

When I start typing in the Title * field I get the following error from the console: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

注意:我正在使用jQuery 2.2.1

Note: I am using jQuery 2.2.1

到目前为止，我已经检查了代码的拼写错误，但找不到任何内容.

So far I have checked the code for mis-spelling but cannot find any.

推荐答案

ajaxValidation($(this))中的this位不是您认为的:实际上是window，因为它是由setTimeout() 调用的.

The this bit in ajaxValidation($(this)) isn't what you think it is: it's actually window, since it's being called by setTimeout().

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

One solution is to assign $(this) to a variable outside the function, like so:

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

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

这篇关于jQuery无法读取未定义的属性"toLowerCase"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！