how do you address 'a' in unordered list

Question

i have this div

<ul id = "issues">
<li>
<h1>titel</h1>
<p>tekst text tekst </p>
<a class="next" href="#">next</a>
</li>
<li>
<h1>titel</h1>
<p>tekst text tekst </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a> 
</li>
....
</ul>

and this script

$('#issues li').each(       
        function(intIndex){

             $(this).nextAll('a').bind("click",function(){
             alert ('hello');

           });//close .bind()

        });//close .each

()

but it isn't working . how can i address the a-tag to see if someone clicked ?

Answer 1

Use correct selector's and you don't need each() for event binding.

$('#issues li a.next').click(function() {
    alert('Index of li: ' + $(this).closest('li').index());
});

Answer 2

You don't need to iterate over the elements to bind the event to them. use:

$('#issues .next').click(function(){
     alert ('hello');
});

Answer 3

 $('#issues a').on('click',function(e){ alert('you clicked '+this.className); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id = "issues"> <li> <h1>titel</h1> <p>tekst text tekst </p> <a class="next" href="#">next</a> </li> <li> <h1>titel</h1> <p>tekst text tekst </p> <a class="next" href="#">next</a><a class="previous" href="#">prev</a> </li> .... </ul>