$(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');

但这也会返回undefined，这让我开始思考可能是因为$(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将引用具有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>