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值（例如：/ some_url？page = 2）。

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

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

请帮忙。

Answer 1

但我在警报中未定义。

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

您需要使用选择器中的href提醒li内的a锚点，或者使用.find()，例如：

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

您还可以将click事件直接附加到il的子锚点，如：

$("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>

Answer 2

这是一种非常接近你所拥有的技术：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/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>

Answer 3

因为元素是动态创建的，

您应该为on函数提供一个选择器：

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

children（）vs find（）

.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）以及

Answer 4

函数调用中的

$(this)指的是li元素，而不是a。您需要在a中找到li，然后获取此类属性href

$("ul.pagination li").click(function(e) {
     
     alert($(this).find('a').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>

单击li标签时获取href值

4 个答案: