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);
});

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);
});

• javascript
• jquery
• html
• onclick
• html-lists

Share Improve this question Follow edited Jun 29, 2015 at 16:40 Shannon 4311 silver badge99 bronze badges asked Apr 7, 2012 at 6:04 user962206user962206 16.2k6565 gold badges185185 silver badges273273 bronze badges 7

• 3 Seems to work for me - jsfiddle/s9JhF – mrtsherman Commented Apr 7, 2012 at 6:11
• try checking the console for errors – Joseph Commented Apr 7, 2012 at 6:12
• I am using firefox with firebug – user962206 Commented Apr 7, 2012 at 6:14
• 1 @user962206 worked for me as well for all buttons – Ali Commented Apr 7, 2012 at 6:14
• Why is it working on mine, there are no errors shown in my console. – user962206 Commented Apr 7, 2012 at 6:16

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

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

I hop this will help

Thery are no value in inner html of buttons. you will write any value in buttons. I have modify your code check it

<ul id = "button-list"> 
    <li>
        <button class = "buttons" id = "first"  name = "ltrContainer"   >1</button>
    </li>
    <li>
        <button class = "buttons" id = "second" name = "ltrContainer"  >2</button>
    </li>
    <li>
        <button class = "buttons" id = "third"  name = "ltrContainer"   >3</button>
    </li>
    <li>
        <button class = "buttons" id = "fourth" name = "ltrContainer"  >4</button>
    </li>
    <li>
        <button class = "buttons" id = "fifth" name = "ltrContainer"  >5</button>
    </li>
    <li>
        <button class = "buttons" id = "sixth" name = "ltrContainer"   >6</button>
    </li>
</ul>



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

$("#button-list .buttons").each(function () {
            $(this).bind("click", function() {
                //Put your code here
            });
});

Hope this helps...