En jQuery está el script
$(document).on('click', '#popup-pers .mfp-close', function(e){}); ,
se usa si .mfp-close es un elemento virtual que aparece no al cargar la página, sino por evento, en su lugar
$(#popup-pers .mfp-close).click();
Necesito el mismo análogo para JS. yo suelo
pers_hide = querySelector('#popup-pers .mfp-close'); pero el navegador solo ve #popup-pers , no '#popup-pers .mfp-close'
Para los elementos creados dinámicamente a los que desea asignar un evento de clic antes de que se inserten en el DOM: asigne el evento al delegador principal y luego consulte Event Event.target.closest(selector) coincide con el selector secundario dinámico deseado.
Aquí hay dos posibles soluciones/sugerencias:
on() : // DOM utility functions: const el = (sel, parent) => (parent ||document).querySelector(sel); const elNew = (tag, props) => Object.assign(document.createElement(tag), props); // On handler: const on = (eventName, delegator, target, cbFn, opts) => el(delegator).addEventListener(eventName, evt => evt.target.closest(target) && cbFn(evt), opts); // Task: // 1. Assign events beforehand: on("click", "#popup-pers", ".mfp-close", (evt) => { console.log(evt.target.textContent); }); // 2. Insert element afterwards: el("#popup-pers").append(elNew("button", { type: "button", className: "mfp-close", textContent: "CLICK" })); #popup-pers { background: gold; padding: 10px; } <div id="popup-pers"></div> De lo contrario, asigne la función de controlador de eventos deseada en la creación de elementos , utilizando el método onclick (que es la única forma válida en que se debe usar esa propiedad, y eso es cuando se crean nuevos elementos en memoria):
// DOM utility functions: const el = (sel, parent) => (parent ||document).querySelector(sel); const elNew = (tag, props) => Object.assign(document.createElement(tag), props); // Task: // Insert element with click function assigned: el("#popup-pers").append(elNew("button", { type: "button", className: "mfp-close", textContent: "CLICK", onclick() { console.log(this.textContent); } })); #popup-pers { background: gold; padding: 10px; } <div id="popup-pers"></div>