按钮列表上的 onclick 事件在使用 JQuery 时不起作用

onclick event on List of buttons is not working using JQuery

本文关键字：JQuery 不起作用 事件 列表 onclick 按钮      更新时间：2023-09-26

我正在尝试在列表中的按钮上添加事件，但似乎只有列表中的第一个按钮被注册到 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);
});

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

我希望这会有所帮助

在按钮的内部 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);
    });
});

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

希望这有帮助...

相关文章：