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);
相关文章:
- 在循环中添加addEventListener()只适用于最后一个按钮
- Phonegap 3.2.0 android应用程序后退按钮剪切仅适用于某些页面
- onclick适用于一个按钮,但不适用于'不要为别人工作
- jquery:$(input).keydown无法在单选按钮上设置处理程序,同样的代码也适用于文本
- 使j查询ajax调用既适用于页面加载,也适用于单击按钮
- CSS for JS 按钮适用于本地计算机,但不适用于服务器
- 我的加载更多功能适用于按钮单击,但它不适用于滚动
- 如何将横向按钮放置到 iframe(适用于所有浏览器)
- 移动菜单切换问题(onclick 仅适用于外部容器,不适用于按钮)
- AngularJS:ng-单击不起作用,适用于<按钮>
- 如何使更改事件适用于使用 replaceWith 添加的 html 的单选按钮
- jQuery sortable 仅适用于文档就绪,不适用于按钮
- 一个功能适用于多个按钮
- Javascript getElementById()适用于文本框,但不适用于;不能使用单选按钮或下拉选择器
- 动态按钮点击事件仅适用于最后一个按钮
- 试图创建一个带有删除每一行的按钮的表,但它只适用于一行(javascript)
- onclick事件仅适用于按钮,而不适用于与按钮一起使用的glyphicon
- 单选按钮上的无提示验证被忽略,而它只适用于相同表单html中的文本字段
- MDL模态按钮适用于一张卡,但不适用于其他卡
- 如何调整空格键和回车只适用于第三个按钮,不适用于任何其他按钮