0
我在使用下面的代碼敲擊「輸入」時定位新創建的行時遇到問題。如果我覺得這樣傾向,我想繼續按「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>
的問題是,在'.on()'不附加到動態創建的行。你需要把它改成'$(「#myTable」)on(「keyup」,「tr td input」,function(){});' – Kramb
如果我有幸找到那篇文章,我可能沒有發現實現了靜態祖先元素(在「on」方法之前)與目標動態創建元素(on方法之後)的細微差別。我認爲你是正確的,在這個問題和你所引用的問題之間有相當多的重疊。我仍然很想知道爲什麼文本子節點(在
原因是因爲事件處理程序綁定到頁面加載時頁面上的每個「tr」元素。如果你在頁面加載後創建了一個'tr'元素,就像你在keyup事件中做的那樣,那麼它們對於DOM來說是新的,並且沒有與原來的'tr'相同的處理器。如果你將它附加到表中,那麼處理程序會說我包含的所有'tr's必須使用這個處理程序。這包括DOM加載後產生的tr。 – Kramb
回答
他們是,這只是你的代表團選擇是錯誤的。該
tr
您插入未綁定的其他在DOM準備喜歡...所以綁定到tbody
這是已經存在,然後擡頭看tr
演示:https://jsfiddle.net/ooavyybm/
來源
2017-07-17 12:36:42 tymeJV
謝謝,tymeJV!我明白「on」方法的功能現在好多了。 – idionym
相關問題