前言

使用append新增的div元素，繫結click事件無效的幾種解決辦法

遇到問題

繫結select下拉框click事件

<script>
    // 繫結select下拉框click事件
    $('[name="bank"]').on('click', function(){
        console.log('select click event!')
    })
</script>

新增的div上點選事件沒監聽到

主要原因是事件是在 dom 載入的時候就已經完成了，新增的 div 元素 click 事件就無效了。
最簡單的方法就是直接在標籤中寫onclick="", 這種是簡單粗暴的解決辦法，但一般不這樣寫。

使用live

live()函式會給被選的元素繫結上一個或者多個事件處理程式，並且規定當這些事件發生時執行的函式。
通過live()函式適用於匹配選擇器的當前及未來的元素。

<script>
    // 繫結select下拉框click事件
    $('[name="bank"]').live('click', function(){
        console.log('select click event!')
    })
</script>

看到網上很多都是用的live方法，但是會報錯：TypeError: $(...).live is not a function

主要原因是jquery中的live()方法在jquery1.9及以上的版本中已被廢棄了，受版本限制，大於1.9版本就用不了。

使用on

接下來還是使用on的方法，把點選事件繫結到它父元素上，這樣就可以了

<script>
    // 繫結select下拉框click事件
    $('#cards').on('click','[name="bank"]', function(){
        console.log('select click event!')
    })
</script>

最通用場景是click事件繫結到document上，這樣就使用任何情況了

<script>
    // 繫結select下拉框click事件
    $(document).on('click','[name="bank"]', function(){
        console.log('select click event!')
    })
</script>