在超链接onclick上使用“this”

Question

Html代码：

<a id='link1' href='#' name='john' >test</a>
<br/><br/>
<a id='link2' href='#' name='john' onclick="showName();">test</a>
<br/><br/>
<a id='link3' href='#' name='smith' onclick="showName();">test</a>

JScript代码：

$(function()
  {
      $('#link1').on('click', function(){
          alert($(this).attr('name'));
      });
  }
)

function showName()
{
    alert($(this).attr('name'));
}

它的小提琴： http://jsfiddle.net/eS7Mv/7/

为什么第二个和第三个链接不起作用？ 顺便说一句，由于某些原因，我需要使用命名函数。 所以我知道：

 $('a').on('click', function(){
          alert($(this).attr('name'));
      });

或者

 $('.TargetClass').on('click', function(){
          alert($(this).attr('name'));
      });

以某种方式解决问题，但我确实需要使用命名函数和访问超链接属性。

<小时/>

更新：感谢所有为此主题做出贡献的人。我不能够感谢你。我很欣赏他们所有人，但由于同时有多个正确的答案，我不知道如何将所有这些答案同时标记为答案。

Answer 1

使用此代码

html代码

<a id='link1' href='#' name='john' >test</a><br/><br/>
<a id='link2' href='#' name='john' onclick="showName(this);">test</a><br/><br/>
<a id='link3' href='#'name='smith'onclick="showName(this);">test</a>

jquery代码是

 function showName(obj)
{
alert($(obj).attr('name'));
}

Answer 2

试试这个

演示小提琴http://jsfiddle.net/eS7Mv/18/

<a id='link1' href='#' name='john' >test</a>
<br/><br/>
<a id='link2' href='#' name='john' onclick="showName(this);">test</a>
<br/><br/>
<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>
<script>
    function showName(element)
{
    alert($(element).attr('name'));
}
</script>

通过调用showName(this)，您将当前元素传递给函数。

修改2

更新了小提琴http://jsfiddle.net/eS7Mv/22/

Answer 3

第二个和第三个链接不起作用，因为在你的javascript函数中“this”指定当前对象，所以当时javascript找不到当前对象，所以你必须在函数参数中传递“this”。

Answer 4

只看小提琴：fiddle

你应该传递一个参数，然后在函数

中使用这个参数

function showName(pthis)
{
    alert($(pthis).attr('name'));
}

<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>

Answer 5

尝试这样的事情

html

<a id='link3' href='#' name='smith' onclick="showName(this);">test</a>

的javascript

function showName(obj)
{
    alert(obj.name);
   //or
   alert($(obj).attr('name'));
}

Answer 6

以下是更新的working code =＆gt; http://jsfiddle.net/eS7Mv/13/

您需要在JQuery访问的所有元素之间保留一些公共属性，然后将事件绑定到那些

根据您的评论，您可以使用命名函数。如果我能为您提供更多代码，请与我们联系。

$(function()
  {
      $('.click').on('click', showName );
  }
)

function showName()
{
    alert($(this).attr('name'));
   // alert("Hello World");
}

这是更新的小提琴 =＆gt; http://jsfiddle.net/eS7Mv/26/

Answer 7

这是jQuery的一个特性，像这样绑定的函数中的'this'将：

  

如果正在调用的函数是使用Function.bind（）创建的，那么   将是当时传递给.bind（）的第一个参数   功能已创建。

     

http://learn.jquery.com/javascript-101/this-keyword/

你的其他内联函数不起作用，因为'this'是当前执行的上下文（我认为这个窗口）。

如果你真的需要使用命名函数，可以这样做：

$(function()
  {
      $('#link1').on('click', function(){
          showName($(this));
      });
  }
)

function showName(clickedLink)
{
    alert(clickedLink.attr('name'));
}

小小提琴说明了其中一些：

http://jsfiddle.net/4axju/1/

Answer 8

如果您的所有代码都以link开头，那么您可以这样做

  $('[id^=link]').on('click', function(){
          alert($(this).attr('name'));
      });

<强> Working Demo

Answer 9

解决方案| Fiddle

您正在寻找e.target.node，所以：

$('body').on('click', function(e){
    alert(e.target.name);    
});

简化你的生活。

此外，如果您不希望它为整个body运行，那么您也可以这样做：

$('#link1, #link2, #link3').on('click', function(e){

您之前的代码无效的原因是因为规则。在jQuery文档中，声明“如果调用的函数是使用Function.bind（）创建的，this将是创建函数时传递给.bind（）的第一个参数。”在你的情况下，我认为它未定义。

使用Chrome中的控制台功能，我证明是对的。看一下这个截图，试着了解发生了什么。你看到你做错了吗？

当引发事件时，例如点击事件，它们会携带重要的信息和参考资料。在单击事件中，事件对象具有对目标的引用。使用此方法，您可以获取引发事件的元素的id。

Answer 10

只有当JS代码位于此html标记之前，或者找不到指定的函数时，onclick属性才有效。

在您的示例中，这有效：http://jsfiddle.net/eS7Mv/20/

但jQuery是更好的方式，例如：

$('a').click(function(){
    alert($(this).attr('name'));
});