Intento hacer un evento de clic con jquery.
El resultado que quiero se muestra a continuación:
primer clic - más uno
segundo clic - más uno
tercer clic - más uno y cambio de identificación y texto del botón
cuarto clic en adelante - más uno y ventana emergente de alerta
Sin embargo, la alerta aparece con el tercer clic.
mi html:
<h1 id="number">0</h1> <button id="next">Add 1</button>mi jquery:
$(document).ready(function () { let num = 0; $("#next").click(function () { ++num; if (num > 2) { $("#next").html("Alert"); $("#next").attr('id', 'alert'); $("#number").html(num); } else { $("#number").html(num); } }); $(document).on("click", "#alert", function () { alert(num); }); });No sé dónde me equivoqué, en teoría me parece bien, pero soy nuevo en jquery y debo haberme perdido algo.
Puedes probar el siguiente código:
$(document).ready(function () { let num = 0; $(document).on("click", "#next", function () { num++; if (num > 2) { $("#next").html("Alert"); $("#next").attr('id', 'alert'); $("#number").html(num); } else { $("#number").html(num); } }); $(document).on("click", "#alert", function () { num++; $("#number").html(num); alert(num); }); });Espero que funcione.
En el tercer clic
e.stopPropagation() para evitar que el evento #next click se propague al elemento #alert .#next click usando $("#next").unbind("click"); o bien $("#next").click se activará el clic al hacer clic en #alert Además, no olvide manejar la alerta y la lógica de incremento dentro del evento de clic "#alert" .
violín de trabajo
$(document).ready(function () { let num = 0; $("#next").click(function (e) { ++num; if (num > 2) { $("#next").unbind("click"); $("#next").html("Alert"); $("#next").attr('id', 'alert'); $("#number").html(num); e.stopPropagation(); } else { $("#number").html(num); } }); $(document).on("click", "#alert", function () { ++num; alert(num); $("#number").html(num); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <h1 id="number">0</h1> <button id="next">Add 1</button>