使用無法定位的JQuery動態插入HTML表格中的行

我在使用下面的代碼敲擊「輸入」時定位新創建的行時遇到問題。如果我覺得這樣傾向，我想繼續按「Enter」來創建新的行;然而，敲擊兩次輸入只會產生最多一行（來自原始HTML行）。爲了調試這種情況，我使用了一個單擊事件偵聽器來控制檯記錄與該表關聯的節點，並發現奇怪的是，本地HTML每行之間都有文本節點;但是，這些文本節點不會隨每個新行而動態生成。這些文本節點是否需要HTML表正常工作？使用無法定位的JQuery動態插入HTML表格中的行

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("tr").on("keydown", "input", function(){ 
       keyDownLocation = this.selectionStart; 
      }); 

      $("tr").on("keyup", "input", function(e){ 
       if (e.key === "Enter") { 
        var tempSelect = this.value.substr(this.selectionStart); 
        this.value = this.value.substr(0, this.selectionStart); 
        $(this).parent().parent().after('<tr><td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td><td class="item-td"><input class="input-item" type="text" value="' + tempSelect + '"></td></tr>'); 
        $(this).parent().parent().next().find(".input-item").focus(); 
       } 
      }); 

      $("tr").on("click", "input", function(){ 
       console.log($(this)); 
       console.log($(this).parent().parent().parent()[0].childNodes); 
      }); 
     }); 
    </script> 
    <title>Title</title> 
</head> 

<body> 
    <table> 
     <thead> 
      <tr> 
       <th><input type="checkbox" name="checklist-list" class="checkbox-box"></th> 
       <th>Item</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td> 
       <td class="item-td"><input class="input-item" type="text" value="Artificial"></td> 
      </tr> 
      <tr> 
       <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td> 
       <td class="item-td"><input class="input-item" type="text" value="Broken"></td> 
      </tr> 
      <tr> 
       <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td> 
       <td class="item-td"><input class="input-item" type="text" value="Casual"></td> 
      </tr> 
     </tbody> 
     <tfoot> 
     </tfoot> 
    </table> 
</body> 
</html>

來源

2017-07-17 idionym

的問題是，在'.on（）'不附加到動態創建的行。你需要把它改成'$（「＃myTable」）on（「keyup」，「tr td input」，function（）{}）;' – Kramb

如果我有幸找到那篇文章，我可能沒有發現實現了靜態祖先元素（在「on」方法之前）與目標動態創建元素（on方法之後）的細微差別。我認爲你是正確的，在這個問題和你所引用的問題之間有相當多的重疊。我仍然很想知道爲什麼文本子節點（在節點之間）沒有動態生成JQuery，因爲它們是由原始HTML自動生成的。感謝您的幫助，Kramb！ – idionym

原因是因爲事件處理程序綁定到頁面加載時頁面上的每個「tr」元素。如果你在頁面加載後創建了一個'tr'元素，就像你在keyup事件中做的那樣，那麼它們對於DOM來說是新的，並且沒有與原來的'tr'相同的處理器。如果你將它附加到表中，那麼處理程序會說我包含的所有'tr's必須使用這個處理程序。這包括DOM加載後產生的tr。 – Kramb

他們是，這只是你的代表團選擇是錯誤的。該tr您插入未綁定的其他在DOM準備喜歡...所以綁定到tbody這是已經存在，然後擡頭看tr

$("tbody").on("keydown", "tr input", function(){ 


$("tbody").on("keyup", "tr input", function(e){ 


$("tbody").on("click", "tr input", function(){

演示：https://jsfiddle.net/ooavyybm/

來源

2017-07-17 12:36:42 tymeJV

謝謝，tymeJV！我明白「on」方法的功能現在好多了。 – idionym

使用無法定位的JQuery動態插入HTML表格中的行

回答

相關問題