$（this）.attr（'href'）返回未定义

Question

好的，我知道有很多关于JQuery .attr的文章是未定义的，但是我找不到能解决甚至提示我这里错误的文章。

首先，我有一个Ajax请求，它填充如下ul。

$.each(msg,function(key, value){
            ul.append('<li class="fa fa-angle-right cnt-link"><a href="'+key+'">'+value+'</a></li>');
        })

这样可以很好地创建列表，并且href尝试转到由键值设置的不存在的页面。

当单击链接时，尽管我尝试使用该href值执行另一个AJAX请求，但是由于某种原因，我无法从中获取值。

$('.cnt-link').click(function(event){
            event.preventDefault();
            var cnt = $(this).text();
            var cntId = $(this).attr('href');               
            console.log(cntId);
            console.log(cnt);
        })

cnt变量设置得很好，所以我看不到$（this）没有引用正确的对象而是试图使href返回未定义的问题。

我也尝试使用添加键值

ul.append('<li class="fa fa-angle-right cnt-link"><a href="#">'+value+'</a></li>').data("cntId", key);

并从单击的项目中检索它

var cntId = $(this).data('cntId');

但这也返回未定义，因此让我开始考虑也许是因为$（this）未能选择正确的对象。

我为此付出了很大的努力，非常感谢任何能看到我犯下的愚蠢错误的人提供的信息:)

Answer 1

cnt-link是<li>因此没有href属性。 如果要在使用代码创建的li获取href

ul.append('<li class="fa fa-angle-right cnt-link"><a href="'+key+'">'+value+'</a></li>');

那么您可以选择a .cnt-link的子代， this将引用a带有href a：

$('.cnt-link > a').click(function(event){

或者，使用.cnt-link上的处理程序，首先选择.cnt-link的.children进入<a> ：

$('.cnt-link').click(function(event){
  event.preventDefault();
  var cntId = $(this).children().attr('href');               
  console.log(cntId);
})

 $('.cnt-link').click(function(event) { event.preventDefault(); var cntId = $(this).children().attr('href'); console.log(cntId); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="fa fa-angle-right cnt-link"><a href="somelink">foobar</a></li> </ul>