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

Question

我正在尝试提取 div 元素的 ID，但是 none 在其他线程中描述的方法已经奏效。这包括：

$(".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-bound 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() 为空或读取 'undefined'，尽管显然有一个 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 在评论中指出的那样，当单击元素的 child 时，这很容易出错，因为 target 将是 child 而click 绑定在 parent 上（而 child 可能根本没有 id）。为确保您获得 parent 的 id，请在 event.target 上使用 .closest('.icon')（它会找到最近的祖先，包括当前元素，class 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 来 returned。否则，调用 .id 将 return undfined。（在 JavaScript 中，DOM 元素是 objects 并且它们的每个属性都是属性，class 是一个明显的例外，可以通过 .classList 属性，它又具有方便的方法，例如：.add()、.remove()、.contains() 和 .toggle()).

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

Answer 2

您需要包含 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>

Answer 3

你的 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);
    });
});

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

event.target.id or $(this).attr("id") not working in Firefox

javascript

jquery

event-handling

jquery-events

jQuery:

JavaScript: