Jquery and dynamic row creation issues

I'm a jquery newbie... still learning the framework.... and here goes my query...

The overview of this query is as follows...

1. I got a table which is created with values from the DB using PHP.

2. We can dynamically add new rows.... remove necessary rows.. and edit the row items and i use jquery for this purpose...

3. In each row there are two cells each containing a link on whose click event i call the necessary jquery function to either edit or remove the row... i use the class name of the link to refer to that item, like... $(.class_name).click();

4. For adding a new row too i use a link on whose click event i call a modal window, get and validate a string, create a new row containing the string,and the links to edit or remove the row with the appropriate class name....

5. The problem i get here is, after i've added the new row, jquery seems not able to identify the element when the link is clicked... it's like the newly added element does not exist within the page..

I will also post the code here... and here it goes...

  // 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();

                    });


    });

I just can't get why the newly added row's element's classes are not visible to jquery... Hope i've been clear... it will really helpful if somebody explains how to clear this up.... thanks a lot in advance..

$("editDept").click(...) affects only the elements that exist on the page by the time it's executed. When you add a new row, the links in that row doesn't have bound any event. You can either bind the click event to the links every time you add a new row or use jQuery's live() to do the job for you:

Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

Your code would be something like this:

 $(".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();

                });


});