jQuery attr（＆＃39; id＆＃39;）返回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 handler function ：

$('.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

  

event.target已在IE9+中提供。如果你需要支持   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，尝试这样的

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;