I try to make a click event with jquery.
The result I want is shown below:
first click - plus one
second click - plus one
third click - plus one & change of button's id and text
fourth click onward - plus one & alert pop-out
However, the alert pop-out at the third click.
my html:
<h1 id="number">0</h1>
<button id="next">Add 1</button>
my 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);
});
});
I don't know where I went wrong, in theory this looks fine to me but I am new to jquery and I must have missed something.
You can try following code:
$(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);
});
});
Hope it will work.
On the third click
e.stopPropagation() to prevent the #next click event being propogated to #alert element.#next click event using $("#next").unbind("click"); or else $("#next").click will be triggered on clicking #alertAlso dont forget to handle the alert and increment logic inside "#alert" click event.
Working Fiddle
$(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>