CODEWITHSUNDEEP
javascriptjqueryhtml
siva
siva

Reputation: 1481

Get href value while clicking li tag

Following is the code of the Div which is created dynamically.

<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>

When I click any <li> tag, I need to take the href value(eg: /some_url?page=2) of corresponding <li> tag.

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

In the above code, clicking event is firing but i am getting undefined in the alert.

Please help.

Upvotes: 1

Views: 1417

Answers (4)

Sanka
Sanka

Reputation: 1324

because elements are created dynamically,

You should provide a selector to the on function:

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

children() vs find()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

but i am getting undefined in the alert.

Yes because you're trying to alert the href of the clicked li when it has no attribute href.

You need to alert the href of the anchor inside the li using a in your selector, or also using .find() like :

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

You could also attach the click event directly to the child anchors of the il's like :

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

Upvotes: 1

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

$(this) inside your function call is referring to li element and not the a. You need to find a inside li and then get the attribute href like this

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

Upvotes: 1

NappingRabbit
NappingRabbit

Reputation: 1918

here is a technique very close to what you had:

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

Upvotes: 1

Related Questions