Ayúdenme a entender por qué js deja de funcionar después de cargar EL MISMO CONTENIDO en div.
<main class="container"> <div id="reload_div"> <div id="color_div" style="width:100px;height:100px; background:red; margin-bottom: 100px"> orig </div> <button id="make_it_green" type="submit" class="btn btn-sm btn-primary"> make it green </button> </div> <button id="reload_btn" type="submit" class="btn btn-sm btn-primary" style="margin-top:20px"> reload </button> </main> <script> $("#make_it_green").click(function(){ $("#color_div").css("background","green") }); $("#reload_btn").click(function(){ $("#reload_div").fadeTo(300,0, function () { $("#reload_div").load ("reload.php", { }, function () { $("#reload_div").fadeTo(300,1, function () { }); }); }); }); </script>Después de cargar el mismo contenido en "reload_div", el botón #make_it_green deja de funcionar. ¿Por qué?
Cuando ejecuta su código como lo ha publicado, el controlador de eventos se agrega al botón make_it_green .
Una vez que carga el nuevo contenido con jQuery, el elemento al que se adjuntó el controlador ya no existe, por lo que el controlador de eventos ya no existe. Carga un nuevo elemento con el mismo nombre, pero no hay un controlador de eventos adjunto a menos que vuelva a adjuntar el controlador de eventos.
Alternativamente, adjunte el controlador de eventos al div que lo contiene y delegue el manejo de eventos.
$("#reload_div").click(function(e){ e.preventDefault(); // Check the id of the original target element. If it's // our button, change the colour. if (e.target.id === "make_it_green") { $("#color_div").css("background", "green"); } });Consulte esta página en MDN para obtener una discusión detallada sobre la delegación de eventos.