jQuery attr（'id'）返回'undefined'

Question

的HTML：

<button class="btn" id="1"></button>
<p></p>

jQuery的：

$('.btn').click(function() {
    var id=$(this).attr('id');
    $('p').html(id);
});

返回值：

未定義

該問題已得到糾正

Answer 1

$(this)

在這種情況下，我建議您使用$(this)

 $('button').click(function(){ console.log($(this).attr("id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn" id="150">Click Me</button> 

---

event.target

就像他的答案中提到的@aspiring_dev一樣，您可以在click函數中使用jQuery處理程序函數的event參數 ：

 $('.btn').click(function(event){ console.log($(event.target).attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn" id="1">Button</button> <p></p> 

---

$(this)和event.target之間的區別

在以下示例中，我為div編寫了一個click事件。 現在單擊Button 1 ， Button 2和黃色div以查看結果之間的差異。 event.target等於孩子點擊的元素 ，但是this始終是等於div 。

 $('div').click(function(event){ var thisId = $(this).attr('id'); var eventTargetId = $(event.target).attr('id'); console.log('thisId » ' + thisId); if(eventTargetId.indexOf('mainDiv')<0) console.log('eventTargetId » ' + eventTargetId); else console.log('eventTargetId' +' = '+ 'thisId » ' + thisId ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mainDiv" style="padding:20px;background:#fdd800;border:1px solid orange;"> <button class="btn1" id="btn1">Button 1</button> <button class="btn2" id="btn2">Button 2</button> </div> 

---

window.event.target

IE9+已提供event.target 。 如果需要支持IE6-8 ，則需要使用event.srcElement 。

 $('button').click(function(){ console.log($(window.event.target).attr("id")); console.log($(window.event.srcElement).attr("id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn" id="150">Click Me</button> 

Answer 2

回調中未定義event ，請嘗試這樣的操作

 $('.btn').click(function(event) { // you're not passing `event` so it's undefined var id=$(event.target).attr('id'); $('p').html(id); });