Jquery 适用于一个按钮，但不适用于另一个相同的按钮？

Question

我正在制作一个 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/>";

?>

Answer 1

您不能在 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>

Answer 2

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

Jquery 适用于一个按钮，但不适用于另一个相同的按钮？

Jquery works for one button, but not for the other identical one?

javascript

php

jquery

button

jbutton