Jquery适用于一个按钮，但不适用于另一个相同的按钮 - Jquery works for one button, but not for the other identical one?

我正在制作一个php论坛，我使用相同的按钮，这样如果一个被点击，它做一个功能。无论如何，对于这个问题，我有一个改变形式的php脚本与相同的问题。该脚本应该在单击按钮时发出警告消息。两个按钮有相同的名称，但警报只适用于第一个按钮，而不是第二个按钮。为什么?我该如何解决它?

buttons.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#oneButton').bind('click', alertButtonClick);
});
function alertButtonClick() 
{
    alert("There was a button clicked");                                                                      
}
</script>
</head>
<body>
<?php
    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<button type='button' id='oneButton'>Post Comment</button></form></div>";
    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<button type='button' id='oneButton'>Post Comment</button></form></div>";
?>
</body>
</html>

编辑:当我解决了按钮问题后，我很快就遇到了另一个问题。我想解决这个问题已经很久了。无论如何，我在下面发布了两个代码。每个div具有值、文本区域和按钮。当我在第一个div中写入文本并单击'post comment'按钮时，它显示该文本和值=1，这是我想要的两个按钮。然而，如果我对第二个按钮做同样的操作，它仍然输出第一个按钮的内容，而不是第二个按钮，为什么?这里是代码，试试它们，帮助我。

button2.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() 
{
    $('.oneButton').bind('click',sendInfoToServer);
});
function sendInfoToServer() 
{
    $('span.commentSent').load('button3.php',
    $('#theForm').serializeArray());
}
</script>
</head>
<body>
    <span class='commentSent'></span>
<?php
    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<input type=hidden name='mess_block' value=1>";
    echo "<textarea name='comment' class='comment' cols=60 rows=2>Enter Comment…</textarea><br />"; 
    echo "<button type='button' class='oneButton'>Post Comment</button></form></div>"; //check the change
    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<input type=hidden name='mess_block' value=2>";
    echo "<textarea name='comment' class='comment' cols=60 rows=2>Enter Comment…</textarea><br />"; 
    echo "<button type='button' class='oneButton'>Post Comment</button></form></div>"; // check the change
?>
</body>
</html>

button3.php

<?php
    $mb = $_POST["mess_block"];
    echo $mb . "<br/>";
    $mt = $_POST["comment"];
    echo $mt . "<br/>";
?>

不能在HTML元素上共享id。尝试更改一个按钮的ID或使用类来代替:

<script>
$(function() {
    $('.clickable-button').on('click', function() {
        alert('There was a button clicked');
    }
});
</script>
// ....
<button class="clickable-button">Button</button>
<button class="clickable-button">Button</button>
<button class="clickable-button">Button</button>

尝试将$('#oneButton').bind('click', alertButtonClick);替换为$('button').bind('click', alertButtonClick);