Estoy usando tippy.js ( https://atomiks.github.io/tippyjs/ ) para cargar una ventana emergente al hacer clic en un botón y dentro de la ventana emergente, el complemento carga el contenido html de otro contenedor. Dentro de este contenedor hay una casilla de verificación (#checkbox1) y una etiqueta en la que normalmente se puede hacer clic para cambiar el valor marcado de la casilla de verificación asociada.

Fuera de la ventana emergente de tippy, esto funciona bien (consulte #checkbox2 y la etiqueta asociada), sin embargo, en el proceso de creación de la ventana emergente, Tippy.js clona el contenedor y, por lo tanto, hay 2 etiquetas y 2 casillas de verificación con la misma ID, lo que hace que se haga clic en la etiqueta no más tiempo cambiando el estado marcado de la casilla de verificación asociada. Vea el ejemplo de código simplificado a continuación:

 <script src="https://unpkg.com/@popperjs/core@2"></script> <script src="https://unpkg.com/tippy.js@6"></script> <button id="btn1">Click</button> <div id="popup" style="display: none;"> <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox 1 Label</label> <!-- clicking this doesn't change the value of the #checkbox1 once cloned inside the tippy popup --> </div> <br /> <input type="checkbox" id="checkbox2" /> <label for="checkbox2">Checkbox 2 label</label> <!-- clicking this changes the value of the #checkbox2 --> <script type="text/javascript"> const template = document.getElementById('popup'); tippy('#btn1', { content: template.innerHTML, allowHTML: true, trigger: "click", interactive: true }); </script>

He revisado mucha documentación y no puedo encontrar ninguna forma en este momento para contrarrestar esto o cualquier otra persona que haya tenido el mismo problema antes. ¿Alguien puede sugerir una solución?

Hay un JSFiddle del código simplificado aquí que ayuda a cualquiera: https://jsfiddle.net/6m83wd4f/