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

       }); 


});