Jquery和动态行创建问题

我是jquery的新手。。。仍在学习框架。。。。我的问题来了

此查询的概述如下所示

我得到了一个使用PHP从DB中创建的值的表

我们可以动态添加新行。。。。删除必要的行。。编辑行项目，我使用jquery来实现这个目的

在每一行中有两个单元格，每个单元格都包含一个链接，我在其单击事件上调用必要的jquery函数来编辑或删除该行。。。 我使用链接的类名来引用该项，如$（.class_name）。单击（）

为了添加新行，我也使用了一个链接，在其单击事件上我调用了一个模式窗口，获取并验证了一个字符串，创建了一个包含该字符串的新行，以及用于编辑或删除具有适当类名的行的链接

我在这里遇到的问题是，在添加新行之后，当单击链接时，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> &nbsp; || &nbsp; </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> &nbsp; || &nbsp; </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();

                    });


    });

//使用php创建初始表
**//链接以添加新行**
标题行
$（“editDept”）。单击（…）
仅影响页面执行时存在的元素。添加新行时，该行中的链接没有绑定任何事件。您可以在每次添加新行时将单击事件绑定到链接，也可以使用jQuery为您执行以下操作：

在jQuery1.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();

                });


});