0
408
Views¿Por qué el html termina debajo del enlace de JavaScript cuando se agrega el elemento?
mi pregunta es que estoy usando jQuery en JavaScript y estoy usando separar y agregar. Aquí está mi secuencia de comandos JavaScript para agregar y separar.
var example1 = $(".example1").detach(); var example2 = $(".example2").detach(); showexample2(); $("#blue").click(function(){ alert("hi"); showexamples2(); hideexamples1(); }); $("#red").click(function(){ hideexamples2(); showexamples1(); }); function hideexamples2(){ $(".example2").detach(); } function showexample2s(){ $("body").append(example2); } function hideexamples1s(){ $(".example1").detach(); } function shoexamples1s(){ $('body').append(example1); } Sin embargo, cuando se hace clic en rojo, termina debajo de JavaScript y, por lo tanto, no tiene funcionalidad. 
¿Cómo puedo arreglar esto?
1 answers
Answer question0
Está agregando el elemento al cuerpo. Lo que significa que se agrega al final del contenido de las etiquetas del cuerpo. Use un selector explícito si desea agregarlo en otro lugar, como una ID o una clase.
$('#elementToAppendTo').append(example1);EDITAR: Me tomó un tiempo entender la segunda mitad de su solicitud. Para que el elemento adjunto responda a los eventos, debe adjuntar el detector de eventos en el padre. Para que el evento suba a través de la pila DOM y se dispare su evento de clic.
$("body").on("click", "#blue", function(){ alert("hi"); showexamples2(); hideexamples1(); }); $("body").on("click", "#red", function(){ hideexamples2(); showexamples1(); });De esta manera, sus eventos funcionarán incluso cuando elimine y vuelva a agregar los elementos DOM. Recomiendo consultar más la documentación de jQuery .
EDITAR:
Para seguir iterando, recomiendo no poner etiquetas de secuencia de comandos con un código como ese, coloque su javascript en un archivo externo y haga referencia a él a través de una etiqueta de fuente de secuencia de comandos.