javascript - a标签绑定onclick事件，取不到$(this)

Question

<a class="no-config" onclick="modifyNameA();">A标签</a>

function modifyNameA() {
    if (openFlag == 'm') {
        $(this).hide();
        $(this).siblings('input').show().focus();
    }
}

A绑定了modifyNameA()事件后，在事件中使用$(this)，取不到这个a元素，请问原因与解决办法。

Answer 1

不建议使用 onclick 之类的属性绑定事件监听，你现在遇到的问题就是问题之一。

如果使用 onclick 属性绑定事件，实际上相当于下面的代码：

function mondifyNameA () {
...
}

var a = document.querySelector('.no-config');
a.onclick = function () {
  eval('modifyNameA()');
};

这样能看出为什么 modifyNameA() 中获取到的 this 是错误的了吧？因为 this 指向了 window 对象。所以上面的朋友给的建议是 ：

<a class="no-config" onclick="modifyNameA(this);">A标签</a>

再修改modifyNameA()方法接收一个参数，这样上面的代码就变成了:

function mondifyNameA (ele) {
...
}

var a = document.querySelector('.no-config');
a.onclick = function () {
  eval('modifyNameA(this)');
};

这样就可以在 modifyNameA() 方法中通过参数获取到标签了，但这样的修改 this 指向的还是 window 对象。实际上只是解决了如何获取标签的问题，并没有解决 this 指向的问题。那有没有办法使用 this 正确获取到标签呢？如果理解了上面的代码，其实是有方法的，如 :

<a class="no-config" onclick="modifyNameA.call(this)">A标签</a>

我在想你都使用了 jQuery 了，为什么还用属性绑定事件而不使用 jQuery 的 onclick() 或 bind() 之类的方法，那你就不会遇到现在的问题了。

Answer 2

onclick本来就娶不到this
改成

<a class="no-config" onclick="modifyNameA(this);">A标签</a>

function modifyNameA(th) {
    if (openFlag == 'm') {
        $(th).hide();
        $(th).siblings('input').show().focus();
    }
}

试试

Answer 3

<a class="no-config" onclick="modifyNameA(this);">A标签</a>
function modifyNameA(e) {
    if (openFlag == 'm') {
        $(e).hide();
        $(e).siblings('input').show().focus();
    }
}

Answer 4

原生和JQ混写不太好吧

Answer 5

适用了jq？原生的onclick不可能取到jq中的$(this)，楼上的onclick="modifyNameA(this);应该就是将这个a本身传入了函数，所以jq可以选取到这个a。混写时候，jq可以用原生，但原生用jq时候要注意