jQuery和动态记录创建问题

Question

我是一个jQuery新手...还在学习框架....这里去我的查询...

此查询的概况如下...

1. 我得到了一个使用PHP从数据库创建的表。

2. 我们可以动态地添加新行....除去必要的行..和编辑的行项目，并使用jQuery为此目的...

3. 在各行有各自包含两个单元链接上的单击事件我调用必要的jquery函数来编辑或删除行...我使用链接的类名称来引用该项目，如... $（。class_name）.click（）;

4. 对于添加一个新行我也使用了一个链接上的单击事件我称之为模态窗口，获取和验证一个字符串，创建一个包含该字符串的新行，以及编辑或删除行的链接适当的类名....

5. 我在这里得到的问题是，我添加新行后，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(); 

        }); 


    }); 

我不能明白为什么新添加的行的元素的类是不可见的jQuery ... 希望如果有人介绍了如何清除这个了，我已经清楚...这将非常有帮助。 ...提前感谢..

Answer 1

$("editDept").click(...)仅影响页面执行时存在的元素。当您添加新行时，该行中的链接不会绑定任何事件。

新增jQuery的1.3：您可以点击事件，每次添加新的行或使用jQuery的live()为你做这项工作时绑定到链路绑定一个处理程序的事件（如单击）所有当前和未来的匹配元素。也可以绑定自定义事件。

您的代码将是这样的：

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

       }); 


});