Jquery работает для одной кнопки, но не для другой идентичной?

Question

Jquery работает для одной кнопки, но не для другой идентичной?

Я делаю 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 и нажимаю кнопку «оставить комментарий», он отображает этот текст и значение = 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/>";

?>

0

button javascript jbutton jquery php

Решение

Другие решения

Вы не можете поделиться идентификаторами на элементах HTML. Попробуйте изменить идентификатор на одну кнопку или вместо этого использовать классы:

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

2

Источник

Accepted Answer

попробуй заменить $('#oneButton').bind('click', alertButtonClick); в $('button').bind('click', alertButtonClick);

1