javascript - 点击 li 标签获取 href 值

Question

以下是Div的代码这是动态创建的。

<div align="right" class="row pagination">
  <ul class="pagination pagination">
   <li class="prev disabled"><span>Previous Label</span></li> 
   <li class="active"><span>1</span></li> 
   <li><a href="/some_url?page=2" rel="next">2</a></li> 
   <li><a href="/some_url?page=3">3</a></li> 
   <li class="next"><a href="/some_url?page=2" rel="next">Next Label</a></li>
 </ul>
</div>

当我点击任何 <li>标签，我需要取对应<li>的href值(eg:/some_url?page=2)标签。

$("ul.pagination li").click(function(e) {
     alert($(this).attr('href'));
});

在上面的代码中，点击事件正在触发，但我在警报中未定义。

请帮忙。

Answer 1

but i am getting undefined in the alert.

是的，因为当点击的 li 没有属性 href 时，您正试图提醒 href。

您需要在选择器中使用 a 或使用 .find 提醒 li 内 anchor 的 href () 喜欢:

alert( $('a', this).attr('href') );
//Or also
alert( $(this).find('a').attr('href') );

您还可以将点击事件直接附加到 il 的子 anchor ，例如:

$("ul.pagination li a").click(function(e) {
  alert( $(this).attr('href') );
});

$("ul.pagination li").click(function(e) {
  alert($('a', this).attr('href'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div align="right" class="row pagination">
  <ul class="pagination pagination">
    <li class="prev disabled"><span>Previous Label</span></li>
    <li class="active"><span>1</span></li>
    <li><a href="/some_url?page=2" rel="next">2</a></li>
    <li><a href="/some_url?page=3">3</a></li>
    <li class="next"><a href="/some_url?page=2" rel="next">Next Label</a></li>
  </ul>
</div>