jQuery无法获取带有'this'的元素ID

Question

我对函数中的"这个"有点困惑。

为什么我没有获得"spanID"作为我点击的元素的 id？

.HTML

<span id="spanID" onclick="alertIt()">something</span>

.JS

function alertIt(){
    alert($(this).attr("id"))
}

这里是 JSfiddle

Answer 1

我不在

span 标签中包含函数调用，

我只是做：

<span id="spanID">something</span>
$(document).ready(function(){
    $("#spanID").click(function(){
        alert($(this).attr("id"));
    });
});

Answer 2

将this添加到 alertIt(( 函数

<span id="spanID" onclick="alertIt(this)">something</span>

Answer 3

HTML

 <span id="spanID" onclick="alertIt($(this))">something</span>

爪哇语

function alertIt(obj){
 alert($(obj).attr("id"))
}

斯菲德尔

Answer 4

使用以下

$("span").on("click",function(){
    alert($(this).attr("id"));
})

工作小提琴

小提琴

Answer 5

您面临一个问题，因为函数中的$(this)引用窗口对象。您应该在onclick="alertIt(this)"中传递this，例如：

<span id="spanID" onclick="alertIt(this)">something</span>
function alertIt(a){
    console.log(a.id);
}

演示

或

你应该使用 jquery .click()事件，如下所示：

<span id="spanID">something</span>
$("span").click(function(){
    alert($(this).attr("id"));
});

演示

Answer 6

this选择器只是获取它嵌套的元素。例：

$("#example").click(function(){
   $(this).fadeOut(500);
});

在您的代码中，没有嵌套this选择器的元素。

Answer 7

因为当您创建内联事件处理程序时，您正在创建一个匿名函数：

onclick="alertIt()"

就像：

function() {
    alertIt();
}

使用 jQuery 绑定的事件处理程序具有相同的行为：

$('#spanID').click(function() {
    alertIt();
});

匿名函数具有正确的上下文，但除非您显式这样做，否则上下文不会传递给其他函数：

onclick="alertIt(this)"

或

$('#spanID').click(function() {
    alertIt(this);
});

和

function alertIt(obj) {
    alert(obj);
}

---

onclick="alertIt.call(this)"

或

$('#spanID').click(function() {
    alertIt.call(this);
});

和

function alertIt() {
    alert(this);
}