Question

I am trying to add events on my buttons inside a list, but it appears that only the first button on the list is being registered with an onclick event. There are no errors shown, but I don’t get why only the first part of the button is being registered with an event? Here it is:

<ul id = "button-list"> 
    <li>
        <button class = "buttons" id = "first"  name = "ltrContainer"   ></button>
    </li>
    <li>
        <button class = "buttons" id = "second" name = "ltrContainer"  ></button>
    </li>
    <li>
        <button class = "buttons" id = "third"  name = "ltrContainer"   ></button>
    </li>
    <li>
        <button class = "buttons" id = "fourth" name = "ltrContainer"  ></button>
    </li>
    <li>
        <button class = "buttons" id = "fifth" name = "ltrContainer"  ></button>
    </li>
    <li>
        <button class = "buttons" id = "sixth" name = "ltrContainer"   ></button>
    </li>
</ul>

only the first button is being registered with an event and here is my JQuery code

$('.buttons').click(function(){
    textContainer.value += this.innerHTML;
    alert(this.innerHTML);
});

Answer 1

 $(function(){
    $('.buttons"').click(function(){
            var myValue = $(this).html();
            alert(myValue); 
        });
      });
 });

I hop this will help