我嘗試使用 jquery 制作點擊事件。
我想要的結果如下所示：
第一次點擊 - 加一
第二次點擊 - 加一
第三次點擊 - 加一并更改按鈕的 id 和文本
第四次點擊 - 加一和警報彈出
但是，第三次單擊時會彈出警報。
我的 HTML：
<h1 id="number">0</h1>
<button id="next">Add 1</button>
我的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);
});
});
我不知道我哪里出錯了，理論上這對我來說看起來不錯，但我是 jquery 的新手，我一定錯過了一些東西。
uj5u.com熱心網友回復：
您可以嘗試以下代碼：
$(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);
});
});
希望它會起作用。
uj5u.com熱心網友回復：
第三次點擊
- 呼叫
e.stopPropagation()以防止#next單擊事件傳播到#alert元素。 - 使用取消系結
#next點擊事件$("#next").unbind("click");，否則$("#next").click將在點擊時觸發#alert
也不要忘記處理"#alert"點擊事件中的警報和增量邏輯。
作業小提琴
$(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/402037.html
標籤：javascript 查询