技術標籤：jQueryjquery前端

目錄

• • 1. $() 動態建立元素，事件監聽失敗
  • 2. html() 動態建立元素，事件監聽失敗
  • 3. 問題原因
  • 4. 解決辦法一 —— 讓動態新增元素較先執行
  • 5. 解決辦法二 —— 建立後註冊事件
  • 6. 解決辦法三 —— 事件委託

1. $() 動態建立元素，事件監聽失敗

使用 $() 的方式動態的為頁面新增元素時，該元素並不會觸發頁面中對應的事件。

<style>
    div {
    	margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color
 
: #4d90fe;
    }
</style>

<div id="jack">jack</div>

<script>
    $("div").click(function () {
        console.log("觸發了點選事件...");
    });

    let mydiv = $("<div id='jethro'>jethro</div>");
    $("body").append(mydiv)
 
;
</script>

當點選 jack 時，控制檯成功輸出內容：

點選 jethro 時，並不會在控制檯輸出任何內容。

2. html() 動態建立元素，事件監聽失敗

同 $() 動態建立元素一樣，html() 方法動態的為頁面新增元素時，該元素也不會觸發事件。

<style>
    div {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div id
 
="jack">jack</div>

<script>
    $("div").click(function () {
        console.log("觸發了點選事件...");
    });

    $("body").html("<div id='jethro'>jethro</div>");
</script>

點選 jethro 時，並不會在控制檯輸出任何內容。

3. 問題原因

一般情況下，頁面元素的事件註冊總是較先執行，因為動態新增元素大多在使用者互動時，或網路請求後出現。

所以動態新增元素時，頁面元素的事件註冊早已完成，新增的元素，是沒有註冊事件的。

於是，就出現了：未來存在的元素，事件監聽不成功的情況。

4. 解決辦法一 —— 讓動態新增元素較先執行

此辦法僅用於學習，在實際開發中並無意義。

<style>
    div {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div id="jack">jack</div>

<script>
    $("body").html("<div id='jethro'>jethro</div>");
    $("div").click(function () {
        console.log("觸發了點選事件...");
    });
</script>

5. 解決辦法二 —— 建立後註冊事件

我們可以在動態新增元素後，為新增的元素註冊事件。

<style>
    div {
        margin-bottom: 10px;
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
    }
</style>

<div id="jack">jack</div>

<script>
    let mydiv = $("<div id='jethro'>jethro</div>");
    mydiv.click(function () {
        console.log("觸發了點選事件...");
    });
    $("body").append(mydiv);
</script>

6. 解決辦法三 —— 事件委託

利用事件冒泡的原理，我們為其父元素新增事件監聽。

<div id="jack">jack</div>
<script>
    $("#jack").on("click", "#jethro", function () {
        console.log("觸發了點選事件...");
    });
    $("#jack").html("<div id='jethro'>jethro</div>");
</script>