时间戳

首页 > 解决方案 > $(this).attr('href') 返回未定义

javascript - $(this).attr('href') 返回未定义

问题描述

好的，我知道有很多关于 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) 没有选择正确的对象。

我对此束手无策，非常感谢任何能看到我犯了什么愚蠢错误的人提供的意见:)

标签： javascriptjquery

解决方案

cnt-link是 a<li>所以它没有href属性。如果您想获取使用代码创建的href内部li

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

那么您可能会选择as ，它们是.cnt-links 的子级，并将使用 athis引用aa href：

$('.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>

推荐阅读