jquery无法使用'this'获取元素id

Question

我对函数中的'this'感到困惑。

为什么我不将'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添加到a​​lertIt（）函数

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

Answer 3

HTML

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

的Javascript

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

jsfiddle

Answer 4

使用以下

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

工作小提琴Fiddle

Answer 5

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

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

<强> DEMO

或

您应该使用jquery .click()事件，例如：

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

DEMO

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