HTML中關於動態建立的標籤沒法綁定js事件的解決方法：.on()方法的 [.selector]

時間 2019-12-09

標籤 html 關於動態建立標籤沒法綁定事件解決方法 selector 欄目 HTML 简体版

原文原文鏈接

在前端頁面的時候，會常常遇到用JavaScript動態建立出來的Button按鈕或其餘標籤沒法使用點擊事件的問題。以下代碼，使用jquery在body中動態建立一個class爲demo的Button按鈕，當點擊這個按鈕時沒法觸發點擊事件。html

<script>
$(function(){
    $("body").html("<button class='demo'>按鈕</button>");
    $(".demo").click(function(){
        alert("彈窗");
    });
});
</script>
<body>
</body>

將以上代碼中的 $(「.demo」).click(function(){………}); 修改成 $(document).on(「click」,」.demo」,function(){………})便可：前端

<script>
$(function(){
    $("body").html("<button class='demo'>按鈕</button>");
    $(document).on("click",".demo",function(){
        alert("彈窗");
    });
});
</script>

<body>

</body>

此時事件冒泡到document對象上，當檢測事件的target，若是與傳入的選擇符（這裏是selector）匹配，就觸發事件，不然不觸發。jquery

.on()方法的 [.selector]用法詳情見：https://www.runoob.com/jquery/event-on.htmlspa