Así que tengo una configuración de plantilla y un formulario dentro de ella,
¿Cómo puedo obtener la identificación del formulario ya que necesito acceder al formulario para acceder al botón de envío para el manejo de eventos?
<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>Esto es lo que intenté usando la línea de comando de los navegadores
document.querySelector('#request > add'); returns null document.getElementById('request').querySelector("#add [name=name]"); returns null document.querySelector("#request").getElementById("add") function does not existLo más cerca que tengo es esto
document.querySelector("#request").content.getElementById("add")Esto devuelve el contenido de la sección de agregar, pero planeo agregarle un detector de eventos y el "contenido" no quiere trabajar con él. ¿Hay alguna alternativa a ella?
El contenido dentro de un elemento HTML <template> es un fragmento de documento y, por lo tanto, no se puede consultar desde el documento raíz de la misma manera que los elementos secundarios de los elementos HTML típicos.
En lugar de intentar agregar un detector de eventos a un elemento secundario de nuestra <template> , queremos esperar hasta que el content de nuestra plantilla se represente en el DOM.
Según el ejemplo de código que compartió en https://jsfiddle.net/mhk4z0wL/ , agregaríamos el detector de eventos justo después de la llamada para agregar el helpTemplate.content clonado:
data.appendChild(helpTemplate.content.cloneNode(true)); data.querySelector('#add').addEventListener('submit', () => { alert('I caught your submit!'); e.preventDefault(); });Esto funcionará, pero no es ideal. Cada vez que el usuario cambia la página renderizada a una que no sea Ayuda haciendo clic en uno de los otros botones de la página, nuestro formulario de Ayuda se eliminará del DOM. En este caso, es mejor eliminar nuestro detector de eventos para evitar pérdidas de memoria. Podríamos hacer esto creando una referencia a nuestra función de devolución de llamada del controlador de envío y asegurándonos de eliminarla dentro de cada controlador de representación de página:
function onSubmitHelpForm(e) { alert('I caught your submit!'); e.preventDefault(); } function clearOnSubmitListener() { const helpForm = document.getElementById('add'); if (helpForm) { helpForm.removeEventListener('submit', onSubmitHelpForm); } } Y luego, dentro de cada controlador de clic de botón, tendríamos: clearOnSubmitListener();
Para ver un ejemplo de cómo funcionaría esto, vea este violín.