Jquery and dynamic row creation issues
<p>I'm a jquery newbie... still learning the framework.... and here goes my query...</p>

<p>The overview of this query is as follows...</p>

<ol>
<li><p>I got a table which is created with values from the DB using PHP.</p></li>
<li><p>We can dynamically add new rows.... remove necessary rows.. and edit the row items and i use jquery for this purpose...</p></li>
<li><p>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();</p></li>
<li><p>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....</p></li>
<li><p>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..</p></li>
</ol>

<p>I will also post the code here... and here it goes...</p>

<pre><code>  // The initial table creation using php



   &lt;table&gt; 
     &lt;tr&gt;
        &lt;td&gt;
           **&lt;a href="#" class = "addDept"&gt; ADD &lt;/a&gt; // Link to add a new row**
        &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/table&gt;  

    &lt;table class="style1" width="100%" align="center" id="deptTable"&gt;
      &lt;tr&gt;
           Header Row
      &lt;/tr&gt;

      &lt;!--  BEGIN LOOP TO PRINT THE TABLE WITH DEPARTMENT NAMES --&gt;
            &lt;?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;
                      }
             ?&gt;
               &lt;tr bgcolor="&lt;?php echo "$bgcolor";?&gt;"
                   align="center"
                   id="dataRow&lt;?php echo $dept_name_i;?&gt;"
                   class ="dataRow"&gt;

                     &lt;td&gt;
                          &lt;?php  echo $dept_name_i;  ?&gt;
                     &lt;/td&gt;

                     &lt;td class="deptName1"&gt;
                         &lt;?php  echo strtoupper($names); ?&gt;
                     &lt;/td&gt;

                     &lt;td&gt;
                         **&lt;a href="#" class="editDept"&gt; // Link to Edit the Row 
                             EDIT
                         &lt;/a&gt;**
                     &lt;/td&gt;

                      &lt;td&gt;
                          **&lt;a href="#" class="removeDept"&gt; // Link to Remove the Row
                                 REMOVE
                          &lt;/a&gt;**
                      &lt;/td&gt;

                 &lt;/tr&gt;

                 &lt;tr style="display:none" class="editRow" id="editRow"&gt;
                      &lt;td align="center"&gt;
                             &lt;?php echo $dept_name_i; ?&gt;
                      &lt;/td&gt;

                      &lt;td align="center"&gt;
                            &lt;input type="text" name="deptName"
                                   class="deptName"
                                    value = "&lt;?php echo $same; ?&gt;" /&gt;

                      &lt;/td&gt;

                      &lt;td align="center"&gt;
                           &lt;a href="#" class="saveDept"&gt;
                                   Save
                           &lt;/a&gt;
                           &lt;b&gt; &amp;nbsp; || &amp;nbsp; &lt;/b&gt;
                           &lt;a href="#" class="cancelDept"&gt;
                                   Cancel
                           &lt;/a&gt;
                       &lt;/td&gt;

                       &lt;td&gt;
                       &lt;/td&gt;
                &lt;/tr&gt;
     &lt;?php
       // increment the iterator
              $dept_name_i++;
      }// end of foreach

     ?&gt; &lt;!--  END OF LOOP TO PRINT THE TABLE  --&gt;
           &lt;/table&gt;
          &lt;/td&gt;
     &lt;/tr&gt;

    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 = "&lt;tr class = 'dataRow' style = 'background-color:"+newRowcolor+"' align = 'center'&gt;\n\
                                &lt;td&gt;\n\
                                   "+serialNo+"\ // this is a variable
                                 &lt;/td&gt;\n\
                                 &lt;td&gt;\n\
                                    "+ nameN +" \n\ // this is a variable too
                                  &lt;/td&gt;\n\
                                  &lt;td&gt;\n\
                                    &lt;a href='#' class =\"editDept\"&gt; \n\
                                       EDIT  &lt;/a&gt; \n\
                                   &lt;/td&gt;\n\
                                     &lt;td&gt;\n\
                                    &lt;a href='#' class =\"removeDept\"&gt; \n\
                                       REMOVE &lt;/a&gt; \n\
                                   &lt;/td&gt; \n\
                                &lt;/tr&gt;";

      var newRow1 = " &lt;tr style='display:none ; background-color:"+newRowcolor+"'  class='editRow' id='editRow'&gt; \n\
                                 &lt;td align='center'&gt; \n\
                                 &lt;/td&gt;\n\
                                 &lt;td align='center'&gt;\n\
                                    &lt;input type='text' \n\
                                     name='deptName' \n\
                                     class='deptName' \n\
                                     value = "+ nameN+" /&gt;\n\
                                 &lt;/td&gt;\n\
                                &lt;td align='center'&gt;\n\
                                     &lt;a href='#' class=\"saveDept\"&gt; \n\
                                        Save \n\
                                     &lt;/a&gt; \n\
                                   &lt;b&gt; &amp;nbsp; || &amp;nbsp; &lt;/b&gt; \n\
                                     &lt;a href='#' class='cancelDept'&gt; \n\
                                         Cancel \n\
                                     &lt;/a&gt;\n\
                                 &lt;/td&gt;\n\
                                &lt;td&gt; \n\
                                 &lt;/td&gt;\n\
                                        &lt;/tr&gt;";
                    $("#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();

                    });


    });
</code></pre>

<p>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..</p>
