我是一个jquery新手......还在学习框架....这里是我的查询...
此查询的概述如下......
我有一个表，它是使用PHP从数据库创建的值。
我们可以动态添加新行....删除必要的行..并编辑行项目，我为此目的使用jquery ...
在每一行中有两个单元格，每个单元格都包含一个链接，在其单击事件中我调用必要的jquery函数来编辑或删除行... 我使用链接的类名来引用该项，例如... $（。class_name）.click（）;
为了添加一个新行，我使用一个链接，在其click事件上我调用一个模态窗口，获取并验证一个字符串，创建一个包含该字符串的新行，以及用于编辑或删除该行的链接适当的班级名称....
我得到的问题是，在我添加新行之后，jquery似乎无法在单击链接时识别元素...就像页面中不存在新添加的元素一样..
我也会在这里发布代码......这里就是......
// The initial table creation using php
<table>
<tr>
<td>
**<a href="#" class = "addDept"> ADD </a> // Link to add a new row**
</td>
</tr>
</table>
<table class="style1" width="100%" align="center" id="deptTable">
<tr>
Header Row
</tr>
<!-- BEGIN LOOP TO PRINT THE TABLE WITH DEPARTMENT NAMES -->
<?php
$bg1 = "#d0d0d0";
$bg2 = "#ffffff";
$dept_name_i = 1;
foreach($dept_names as $names) {
$same = strtoupper($names);
if($dept_name_i % 2) {
$bgcolor = $bg1;
}
else {
$bgcolor = $bg2;
}
?>
<tr bgcolor="<?php echo "$bgcolor";?>"
align="center"
id="dataRow<?php echo $dept_name_i;?>"
class ="dataRow">
<td>
<?php echo $dept_name_i; ?>
</td>
<td class="deptName1">
<?php echo strtoupper($names); ?>
</td>
<td>
**<a href="#" class="editDept"> // Link to Edit the Row
EDIT
</a>**
</td>
<td>
**<a href="#" class="removeDept"> // Link to Remove the Row
REMOVE
</a>**
</td>
</tr>
<tr style="display:none" class="editRow" id="editRow">
<td align="center">
<?php echo $dept_name_i; ?>
</td>
<td align="center">
<input type="text" name="deptName"
class="deptName"
value = "<?php echo $same; ?>" />
</td>
<td align="center">
<a href="#" class="saveDept">
Save
</a>
<b> || </b>
<a href="#" class="cancelDept">
Cancel
</a>
</td>
<td>
</td>
</tr>
<?php
// increment the iterator
$dept_name_i++;
}// end of foreach
?> <!-- END OF LOOP TO PRINT THE TABLE -->
</table>
</td>
</tr>
Now to the jquery part.. i'll just show the function to add a new row....
$(document).ready(function(){
$('.addDept').click(function() {
$('#dialog').dialog('open');
});
// please note that there's some code at this point, that i have not included here, //to get a string through a jquery modal window..
// now the part where we add a row...
var newRow = "<tr class = 'dataRow' style = 'background-color:"+newRowcolor+"' align = 'center'>\n\
<td>\n\
"+serialNo+"\ // this is a variable
</td>\n\
<td>\n\
"+ nameN +" \n\ // this is a variable too
</td>\n\
<td>\n\
<a href='#' class =\"editDept\"> \n\
EDIT </a> \n\
</td>\n\
<td>\n\
<a href='#' class =\"removeDept\"> \n\
REMOVE </a> \n\
</td> \n\
</tr>";
var newRow1 = " <tr style='display:none ; background-color:"+newRowcolor+"' class='editRow' id='editRow'> \n\
<td align='center'> \n\
</td>\n\
<td align='center'>\n\
<input type='text' \n\
name='deptName' \n\
class='deptName' \n\
value = "+ nameN+" />\n\
</td>\n\
<td align='center'>\n\
<a href='#' class=\"saveDept\"> \n\
Save \n\
</a> \n\
<b> || </b> \n\
<a href='#' class='cancelDept'> \n\
Cancel \n\
</a>\n\
</td>\n\
<td> \n\
</td>\n\
</tr>";
$("#deptTable tbody").append(newRow);
$("#deptTable tbody").append(newRow1);
// code for editing the row.... just in case...
$(".editDept").click(function(){
var data = $(this).parent().parent().prevAll().length;
var edit = data + 1;
deptName_b4Edit = $("#deptTable tr:eq("+data+") td:eq(1)").text();;
$("#deptTable tr:eq("+ edit +")").show();
$("#deptTable tr:eq("+ data +")").hide();
});
});
我无法理解为什么新添加的行元素的类对jquery不可见... 希望我已经清楚了...如果有人解释如何清除它会非常有用......非常感谢提前......
答案 0 :(得分：1)
$("editDept").click(...)仅影响页面执行时存在的元素。添加新行时，该行中的链接不会绑定任何事件。您可以在每次添加新行时将click事件绑定到链接，或者使用jQuery的live()为您完成工作：
在jQuery 1.3中添加：将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。也可以绑定自定义事件。
您的代码将是这样的：
$(".editDept").live('click', function(){
var data = $(this).parent().parent().prevAll().length;
var edit = data + 1;
deptName_b4Edit = $("#deptTable tr:eq("+data+") td:eq(1)").text();;
$("#deptTable tr:eq("+ edit +")").show();
$("#deptTable tr:eq("+ data +")").hide();
});
});