jquery $(this).id 返回未定义

Posted 2023-05-08

【中文标题】jquery $(this).id 返回未定义

【英文标题】：jquery $(this).id return Undefined

【发布时间】：2012-05-21 15:44:54

【问题描述】：

我在一个页面上有两个 asp 单选按钮，它们位于 updatepanel 中。我用 jQuery 为他们写了一个点击事件，如下所示：

$(document).ready(function () 
    $(".inputs").click(function () 
         alert($(this).id);
    );
);

但它返回未定义。有什么问题？

EDIT:

        alert(" or " + $(this).attr("id"));
alert(this.id);

这两行返回null!

【问题讨论】：

始终使用 console.log();这会容易得多。在您的示例中，您可以使用：console.log(this);它显示所有数据（id、className 等...）

【参考方案1】：

$(this) 和 this 不一样。第一个代表一个包裹在您的元素周围的 jQuery 对象。第二个只是你的元素。 id 属性存在于元素上，但不存在于 jQuery 对象上。因此，您有几个选择：

直接访问元素上的属性：

this.id

从 jQuery 对象访问它：

$(this).attr("id")

从jQuery中拉出对象：

$(this).get(0).id; // Or $(this)[0].id

从event 对象中获取id：

当引发事件时，例如点击事件，它们会携带重要的信息和引用。在上面的代码中，您有一个点击事件。此事件对象引用了两个项目：currentTarget 和 target。

使用target，您可以获得引发事件的元素的id。 currentTarget 只会告诉您事件当前正在冒泡的元素。这些并不总是相同的。

$("#button").on("click", function(e) console.log( e.target.id ) );

在所有这些中，最好的选择是直接从 this 本身访问它，除非您参与一系列嵌套事件，否则最好使用每个嵌套的 event 对象事件（给它们所有唯一的名称）以引用更高或更低范围内的元素。

【讨论】：

显然这是一个足够受欢迎的问题，当我在 google 上搜索“$(this).id in jquery”时，这是排名第一的搜索结果。你的回答是正确的，帮助了我。我使用了 .attr() 方法，它就像一个魅力。谢谢！

@Pier 确实这是最好的答案，但不是唯一正确的答案。

@yeyo 但这是更有用、更优雅、更完整的答案。它甚至包括“正确”答案中列出的答案作为其选项#4。 OP 应将此设置为正确答案。

【参考方案2】：

另一种选择（就如你所见）：

$(function () 
    $(".inputs").click(function (e) 
         alert(e.target.id);
    );
);

【参考方案3】：

嗨演示 http://jsfiddle.net/LYTbc/

这是对DOM元素的引用，所以你可以直接包装它。

attr API：http://api.jquery.com/attr/

.attr() 方法仅获取匹配集中第一个元素的属性值。

祝你好运，干杯！

代码

$(document).ready(function () 
    $(".inputs").click(function () 
        alert(this.id);
        
        alert(" or " + $(this).attr("id"));
    );
);​

【参考方案4】：

$(this) 是一个包裹 DOM 元素 this 的 jQuery 对象，而 jQuery 对象没有 id 属性。您可能只想通过this.id 获取被点击元素的id 属性。

【参考方案5】：

使用这个动作

$(document).ready(function () 
var a = this.id;

alert (a);
);

【参考方案6】：

this : 是 DOM 元素 $(this) : Jquery objct，用 Dom Element 包裹，你也可以查看这个答案this vs $(this)

尝试像这样Attr()。获取匹配元素集中第一个元素的属性值。

$(document).ready(function () 
    $(".inputs").click(function () 
         alert(" or " + $(this).attr("id"));

    );
);

【参考方案7】：

试试：

$(document).ready(() => 
    $(".inputs").click((e) => 
         alert($(e.target).attr('id'))
    )
)    

【参考方案8】：

您可以使用.attr('id') 来获取元素的id。

$(".fichier").bind('click', function()      
     alert($(this).attr('id'));
);