按钮列表上的onclick事件无法使用JQuery

时间:2012-04-07 06:04:47

标签: javascript jquery html onclick html-lists

我正在尝试在列表中的按钮上添加事件,但似乎只有列表中的第一个按钮正在注册onclick事件。没有显示错误,但我不明白为什么只有按钮的第一部分正在注册事件?这是:

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

只有第一个按钮正在注册一个事件,这是我的JQuery代码

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

3 个答案:

答案 0 :(得分:2)

Thery在按钮的内部html中没有价值。你会在按钮中写下任何值。 我修改了你的代码检查它

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

答案 1 :(得分:1)

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

我跳这会有帮助

答案 2 :(得分:0)

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

希望这会有所帮助......