的jQuery：

Question

我试图提取div元素的id，但是其他线程中描述的方法都没有工作。这包括：

Wednesday = 4

我成功获取div ID的唯一方法是在HTML中使用onclick函数连接到html绑定的JS函数。（虽然这是因为函数是在HTML元素之前定义的，这对于我需要在文档末尾调用的外部文件是不可能的。）

extension Date {
    func dayNumberOfWeek() -> Int? {
        return Calendar.current.dateComponents([.weekday], from: self).weekday
    }
}

我得到的确切问题是变量'id'的console.log（）为空或读取'undefined'，尽管明显有ID并且它在HTML绑定时有效。

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

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

谢谢，

丹尼尔。

Answer 1

的jQuery：

＆＃13;

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

＆＃13;

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

＆＃13;

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

作为评论中提到的charliefl，当点击元素的子元素时，这很容易出错，因为target将是孩子，而点击被绑定在父母（和孩子）上可能根本没有id。要确保获得父级的id，请使用.closest('.icon')上的event.target（找到最近的祖先，包括当前元素，使用类icon）。

因此，改进的jQuery方法将是：

＆＃13;

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

＆＃13;

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

＆＃13;

的JavaScript：

＆＃13;

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

＆＃13;

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

＆＃13;

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

重要的区别以及你应该从中获得的是DOM元素与围绕它的jQuery包装器不同。您总是可以通过在jQuery包装器中包装任何DOM元素来使用jQuery方法：.toggle()，反之，您可以使用$('selector')从jQuery包装器访问DOM元素。如果jQuery包装器是一个集合，您可以使用$('selector')[0]进行迭代，或者您可以使用.each()直接转到其中一个。{1}}。因此，.eq(index)相当于document.querySelector('.icon')。

Answer 2

您需要添加jQuery库并在ready()函数中添加代码

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

Answer 3

您的<%= f.text_field :add_debt %>应该可以正常工作，我猜你不会jquery code包含jquery library只为你工作的原因。

添加jquery库并将代码放在javascript code

中

doument.ready

和jquery代码

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

event.target.id或$（this）.attr（“id”）无法在Firefox中运行

3 个答案:

的jQuery：

的JavaScript：