时间戳

首页 > 解决方案 > 为什么 $(this).prop("id") 在这种情况下未定义？

jquery - 为什么 $(this).prop("id") 在这种情况下未定义？

问题描述

我知道与 $(this) 令人困惑的性质类似的问题之前已经被问过很多次了，但是我仍然无法通过阅读它们来弄清楚这一点；如果这真的很简单/已经在其他地方回答过，请提前道歉。

我有一个带有自动完成功能的输入表单，它从 JSON 文件中获取建议。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>HTML Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <input type="text" name="example" id="example">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="code.js"></script>
</body>

然后我有一些javascript

$(document).ready(function () {
    $("#example").autocomplete({
        source: function () {
            console.log($(this).prop("id"));
            var suggestions = [];
            $.getJSON("parameters.json", function (data) {
                $.each(data, function (key, val) {
                    if (key == $(this).prop("id")) {
                        suggestions = val;

                    }
                });
            })
            return suggestions;
        }
    });

    $("#example").keyup(function () {
        console.log($(this).prop("id"));
    })
});

正如预期的那样console.log($(this).prop("id"));，$("#example").keyup()事件处理程序活页夹中的输出“示例”。但是，console.log($(this).prop("id"));在自动完成小部件的代码中输出Undefined. 为什么会这样？如果我.prop("id")从两者中删除它们，它们就会返回 jQuery 对象

顶部对象是从 keyup 输出的，底部是来自自动完成的。

谁能解释这里的差异？谢谢！

标签： jqueryhtmljquery-ui

解决方案

您可以询问该$(this)对象以找到您要查找的内容。使用console.log($(this))jQuery 返回一个包含一个对象的数组。该对象包括另一个称为“元素”的对象数组，其中包含对该<input>元素的引用。

即使我添加了多个元素并按类而不是 ID 绑定了自动完成功能，我也使用$(this)[0].element[0].id了而不是它。$(this).prop("id")<input>

编辑

为了进一步回答我的答案-这可能比其他一些人提供的倾斜引用和解雇更有用。以下将处理@Barmar 描述的回调问题，并允许您访问所描述的 ID。

$(document).ready(function () {
    $("#example").autocomplete({
        source: function () {
            var suggestions = [];
            var elementId = $(this)[0].element[0].id;
            $.getJSON("parameters.json", function (data) {
                $.each(data, function (key, val) {
                    console.log(elementId);
                    if (key == elementId) {
                        suggestions = val;
                    }
                });
            });
            return suggestions;
        }
    });

    $("#example").keyup(function () {
        console.log($(this).prop("id"));
    });
});

该变量在仍在正确的上下文中elementId时捕获 ID，并使其可用于由和生成的委托函数。在我的示例中，将为每个返回的 key/val 对写出到控制台。$(this)$.getJSON$.eachelementId

推荐阅读