Tengo una cuenta regresiva en mi contenedor div, pero cuando traté de recargar ese contenedor específico, se recargó perfectamente, pero mi cuenta regresiva no apareció y también el botón se deshabilitó.
function refreshDiv() { $('#container3').load(window.location.href + " #container3"); }JavaScript
var spn = document.getElementById("count"); var btn = document.getElementById("btnCounter"); var count = 2; // Set count var timer = null; // For referencing the timer (function countDown() { // Display counter and start counting down spn.textContent = count; // Run the function again every second if the count is not zero if (count !== 0) { timer = setTimeout(countDown, 1000); count--; // decrease the timer } else { // Enable the button btn.removeAttribute("disabled"); } }()); este es mi código html, funciona correctamente cuando actualizo toda la página, pero cuando actualizo #container3 mi botón se deshabilitó y la cuenta regresiva no se mostró
<div class="container"> <div class="container1"> <h2>choose product </h2> <input type="file" name="inpFile" id="inpFile"> <div class="image-preview" id="imagePreview"> <img src="" alt="Image Preview" id="zoom" class="image- preview__image"> <span class="image-preview__default-text">choose image</span> </div> </div> <div class="container2" id="container3"> <h4 id="title">here</h4> <div class="controls"> <div class="main-controls"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button> <div class="dropdown-menu"> <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button>function refreshDiv() { count = 2; timer = null; countDown(); }Eliminé el jquery que recarga #container3 y restablecí el conteo y el temporizador y funcionó para mí en un entorno de servidor http de node.js... El componente se actualiza al hacer clic en Guardar.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="container1"> <h2>choose product </h2> <input type="file" name="inpFile" id="inpFile"> <div class="image-preview" id="imagePreview"> <img src="" alt="Image Preview" id="zoom" class="image- preview__image"> <span class="image-preview__default-text">choose image</span> </div> </div> <div class="container2" id="container3"> <h4 id="title">here</h4> <div class="controls"> <div class="main-controls"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled>File <span id="count"></span></button> <div class="dropdown-menu"> <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();">Save</button> <script> var spn = document.getElementById("count"); var btn = document.getElementById("btnCounter"); var count = 2; // Set count var timer = null; // For referencing the timer function countDown() { // Display counter and start counting down spn.textContent = count; // Run the function again every second if the count is not zero if (count !== 0) { console.log(count); timer = setTimeout(countDown, 1000); count--; // decrease the timer } else { // Enable the button btn.removeAttribute("disabled"); } }; function refreshDiv() { count = 2; timer = null; countDown(); } countDown(); </script> </body> </html>