有一个使用特定下拉框的值动态创建的表，一旦生成该表，我应该能够单击表行的复选框，这应该会更新数据库中的值并动态隐藏在表中。
示例：
我有一个带有以下列的表名分配
id | assigned_to | assignment_name | assigned _by | status |
id->用于标识行assigned_to和assigned_by是的人名assignment_name是作业的名称并且状态为挂起或完成。
现在我想要的是从下拉框中选择用户时，我应该能够看到分配给处于挂起状态的特定人员的所有分配。
一旦显示了作业，我应该能够点击复选框，当我这样做时，它应该将其隐藏起来，并将状态更改为完成。动态，不离开页面。
我在这方面试了很多。。当我单独处理它们时，它们正在工作，即。；当我想动态显示特定用户的所有分配时，我可以这样做，并且如果我试图从一个不是动态创建的表中隐藏一行，这也是完美的，但我面临的prom是当我将这两个功能结合在一起时。
这是我有的代码
主页
<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" method="POST">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a USER:</option>
<?php
include("dbconfig.php");
$query4="select * from users";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<option value="<?php echo $row['username']; ?>"><?php echo $row['username']; ?>/option>
<?php
}
?>
</select>
</form>
<br />
<div id="txtHint">
<div id="main">
<table>
<?php
include("dbconfig.php");
$query4="select * from assignment where status='pending'";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<tr class="record">
<TD width="28"><input type="checkbox" name="id" id="<?php echo $row['id']; ?>"class="updatebutton"></TD>
<td width="150"><?php echo $row["assigned_to"]; ?></td>
<td width="150"><?php echo $row["assignment_name"]; ?></td>
<td width="150"><?php echo $row["assigned_by"]; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".updatebutton").click(function(){
var element = $(this);
var update_id = element.attr("id");
var info = 'id=' + update_id;
$.ajax({
type: "GET",
url: "update.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>
</div>
</body>
</html>
update.php
<?php
$id=$_GET['id'];
include("dbconfig.php");
$sql = "update assignment set status='complete' where id='$id'";
mysql_query( $sql);
?>
get.php
<html>
<body>
<table>
<?php
$q=$_GET["q"];
include("dbconfig.php");
$query4="select * from assignment where status='pending' and assigned_to='$q'";
$result4 = mysql_query($query4);
while($row=mysql_fetch_array($result4))
{
?>
<tr class="record">
<TD width="28"><input type="checkbox" name="id" id="<?php echo $row['id']; ?>" class="updatebutton"></TD>
<td width="150"><?php echo $row["assigned_to"]; ?></td>
<td width="150"><?php echo $row["assignment_name"]; ?></td>
<td width="150"><?php echo $row["assigned_by"]; ?></td>
</tr>
<?php
}
?>
</table>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".updatebutton").click(function(){
var element = $(this);
var update_id = element.attr("id");
var info = 'id=' + update_id;
$.ajax({
type: "GET",
url: "update.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
</script>
</body>
</html>
请帮我处理这件事。我已经花了几天的时间在做这件事了，我想不通。。
提前感谢
我怀疑问题的出现是因为您正在动态创建表。当您将元素动态添加到DOM时，它们将不会应用单击处理程序。例如
$('div').click( dosomething );
$('body').append('<div>'); //click wont do anything because it was appended post event binding
有两种方法可以解决这个问题。一种是在添加元素后重新绑定函数。
$('div').click( dosomething );
$('body').append('<div class="new">');
$('div.new').click( dosomething ); //rebind to apply to new elements
另一种方法是在jQuery 1.4.2+中使用delegate，或者在1.7+中使用on。这些方法本质上是在更高的级别上进行监视，并在事件出现时捕获事件。如果你想看你的整个页面，你可以使用：
$('body').on('click', 'div', function() { dosomething });
这些都是很好的功能，因为它们可以防止您不得不一次又一次地绑定事件。在您的示例中，我将绑定到您的表或表的容器。这减少了绑定事件的数量，也限制了它们需要进行的冒泡量
好吧，这是一个基于你发布的fiddle的例子。此版本不起作用。从下拉列表中选择一个用户，然后勾选复选框。未触发警报。
http://jsfiddle.net/bBBRD/
这个版本确实有效。我们没有将单击事件绑定到每个复选框，而是绑定到包含复选框的表。然后等待事件出现。通过这种方式，动态添加的元素可以继续工作。
http://jsfiddle.net/bBBRD/1/