event.target.id 或 $(this).attr( "id" ) 在 Firefox 中不起作用

Question

我正在尝试拉取div元素的id，但是其他线程中描述的方法都没有奏效。这包括：

$(".icon").on('click', function(event){
var id = $(this).attr("id");
console.log(id);
});
$(".icon").on('click', function(event){
var id = event.target.id;
console.log(id);
});
$(".icon").click(function(event){
var id = event.target.id
console.log(id);
});
$(".icon").click(function(event){
var id = this.id;
console.log(id);
});

我成功拉取div ID 的唯一方法是当我在 HTML 中使用 onclick 函数连接到 html 绑定的 JS 函数时。(尽管这是因为该函数是在 HTML 元素之前定义的，而我需要在文档末尾调用的外部文件无法做到这一点。

<script>
function getId(element) {
console.log(element.id);
}
</script>
<div class="icon" id="test" onclick="getId(this)">text goes here</div>

我得到的确切问题是变量"id"的 console.log() 要么为空，要么读取"未定义"，尽管显然有一个 ID 并且在 HTML 绑定时它可以工作。

我需要能够在从 HTML 代码末尾调用的外部 JS 文件中单击时读取div 的 id。

如果有帮助，div 元素有一个父div。

Answer 1

jQuery：

$(".icon").on('click', function(event){
var id = $(event.target).attr('id');
console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon" id="test">text goes here</div>

当使用 jQuery 绑定单击事件时，传递的参数是click事件。如果console.log-ed，它将在.target属性中显示 DOM 元素。event.target是一个 DOM 元素。因此，您可以使用event.target.id获取id，或者，为了坚持使用jQuery方法，应该在DOM元素周围的jQuery包装器上使用.attr('id')：$(event.target).attr(id)。

正如 charliefl 在注释中指出的那样，当单击元素的子元素时，这很容易出错，因为当单击绑定在父元素上时target子元素将是子元素(并且子元素可能根本没有id)。若要确保获取父项的id，请在event.target上使用.closest('.icon')(使用类icon查找最接近的祖先，包括当前元素)。

因此，改进的jQuery方法是：

$(".icon").on('click', function(event){
var id = $(event.target).closest('.icon').attr('id');
console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon" id="test">text goes here</div>

JavaScript：

getId = function(el) {
console.log(el.id);
}

<div class="icon" id="test" onclick="getId(this)">text goes here</div>

使用onclick属性绑定时，函数的第一个参数不是event，而是DOM element。如果元素具有id属性，则通过调用.id返回该元素。否则，调用.id将返回undfined。(在 JavaScript 中，DOM 元素是对象，它们的每个属性都是属性，除了class之外，可以通过.classList属性访问，而 属性又具有方便的方法，如：.add()、.remove()、.contains()和.toggle())。

重要的区别以及您应该从中得到的是，DOM 元素与它的 jQuery 包装器不同。您始终可以通过将任何 DOM 元素包装在 jQuery 包装器中使用 jQuery 方法：$('selector')反之亦然，您可以使用$('selector')[0]从 jQuery 包装器访问 DOM 元素。如果 jQuery 包装器是一个集合，您可以使用.each()迭代它，也可以使用.eq(index)直接转到其中一个。因此，document.querySelector('.icon')等同于$('.icon').eq(0)[0]。

Answer 2

你的jquery code应该可以正常工作，我想你不包括jquery library这就是为什么只有javascript code适合你。

添加 jquery 库并将代码放入doument.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

和 jquery 代码

$(function () {
$(".icon").on('click', function (event) {
var id = $(this).attr("id");
console.log(id);
});
});

Answer 3

您需要包含jQuery库并将代码添加到ready()函数中

$(document).ready(function() {
$(".icon").on('click', function(event) {
console.log($(this).attr("id"));
console.log(event.target.id);
});
$(".icon").click(function(event) {
console.log(event.target.id);
console.log(this.id);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon" id="test">text goes here</div>