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

【问题标题】：Jquery works for one button, but not for the other identical one?Jquery 适用于一个按钮，但不适用于另一个相同的按钮？
【发布时间】：2015-07-19 04:53:08
【问题描述】：

我正在创建一个 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 中编写文本并单击“发表评论”按钮时，它会播放该文本和 value=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/>";

?>

【问题讨论】：

标签： javascript php jquery button jbutton

【解决方案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>

【讨论】：

那么像reddit这样的论坛是做什么的，他们是否必须为每个帖子制作不同的按钮，我认为他们会分享它们。
按钮上都有一个类，共享一个通用功能，但该功能会分析点击了哪个按钮，并据此执行功能。
@MattDathew 如前所述，他们可能会共享一个class 名称，然后可能使用$(this) 来获取点击的特定元素的值。
例如，如果你想隐藏按钮之前的元素，你可以使用$(this).prev().hide();

【解决方案2】：

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

【讨论】：

简而言之：您有两个具有相同 id 的表单。您需要为每个表单创建处理程序。我建议你问一个新问题。
我不知道如何解决它，我正在尝试创建一个论坛，人们可以点击随机帖子并回复他们。就像 yahoo 或 reddit 这样的回复网站所做的那样。我认为他们不会为每个人创建处理程序，因为帖子可能有数千个。我不想创建一个新问题，我可能会因为我问过这个问题而被评分
当您执行 $ ('# theForm').serializeArray() 时，将序列化页面上所有 id 为 'theForm' 的表单。您需要为每个表单指定唯一的 ID 或名称。
我有一个创建和命名所有表单的计算机程序，所以它们都是相似的，我希望有数百个表单。但是如果点击它的按钮，我想要每个人的独立信息
太好了，对我有用。我注意到你有 id=form-1 和 id=form-2，因为我的初始程序是为每个创建的新表单自动设置 id = theform，有没有一种自动化的方式来做你的风格？