所以我有一個模板設定和一個里面的表格，
我如何獲取表單的 ID，因為我需要訪問表單才能到達提交按鈕以進行事件處理。
<template id ="Request">
<form id="add">
<label>Name
<input type="text" name="name" required/>
</label>
<label>Price
<input type="text" name="price" required/>
</label>
<input type="submit" value="Add"/>
</form>
</template>
這是我使用瀏覽器命令列嘗試過的
document.querySelector('#request > add');
returns null
document.getElementById('request').querySelector("#add [name=name]");
returns null
document.querySelector("#request").getElementById("add")
function does not exist
我得到的最近的是這個
document.querySelector("#request").content.getElementById("add")
這將回傳添加部分的內容，但我計劃向它添加一個事件監聽器，并且“內容”不想使用它。有什么替代品嗎？
uj5u.com熱心網友回復：
HTML 元素中的內容<template>是一個檔案片段，因此不能像典型 HTML 元素的子元素那樣從根檔案中查詢。
我們不想嘗試將事件偵聽器添加到我們的子節點<template>，而是希望等到content我們的模板被渲染到 DOM 中。
根據您在https://jsfiddle.net/mhk4z0wL/上共享的代碼示例，我們將在呼叫后添加事件偵聽器以附加克隆helpTemplate.content：
data.appendChild(helpTemplate.content.cloneNode(true));
data.querySelector('#add').addEventListener('submit', () => {
alert('I caught your submit!');
e.preventDefault();
});
這會起作用，但并不理想。每次用戶通過單擊其他頁面按鈕之一將呈現的頁面更改為“幫助”以外的頁面時，我們的“幫助”表單將從 DOM 中洗掉。在這種情況下，最好洗掉我們的事件監聽器以防止記憶體泄漏。我們可以通過創建對提交處理程式回呼函式的參考并確保在每個頁面呈現處理程式中洗掉它來做到這一點：
function onSubmitHelpForm(e) {
alert('I caught your submit!');
e.preventDefault();
}
function clearOnSubmitListener() {
const helpForm = document.getElementById('add');
if (helpForm) {
helpForm.removeEventListener('submit', onSubmitHelpForm);
}
}
然后在每個按鈕單擊處理程式中，我們將擁有：clearOnSubmitListener();
有關如何作業的示例，請參閱此小提琴。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472188.html
標籤：javascript html jQuery dom