A.D.的程式筆記: 『JQuery』元件綁定事件沒反應解法

JQuery事件非常的好用，click, change, keyup...等等
但是有時候會發現
為什麼已經照著教學做了還是沒反應呢？

當你的程式碼如下：

HTML:

<h5>Jsut a button</h5>
<button type="button" id="ShowWord >ShowWord</button>

javascript:

$("#ShowWord").click(function(){
    console.log("Hi!"); 
});

結果發現按了沒有反應

這個原因有兩個

第一個原因：

有可能是因為你的事件在HTML生成前就綁定導致找不到ShowWord這個id

解法：
把這個事件綁定移動到HTML ready事件裡面，等待html元件都渲染完畢在綁定
javascript:

$(document).ready(function() {
    $("#ShowWord").click(function(){
        console.log("Hi!"); 
    });
});

第二個原因：
如果你的HTML元件是後來才生成的，比document ready還要晚，
例如你使用append函式把這個按鈕給動態生成了！這時也會發生綁定失敗

解法：
用on來綁定，假設你是把這個按鈕append在某個元件(id="Father")裡面例如：
javascript:

$("#Father").append('<button type="button" id="ShowWord >ShowWord</button>');

那你的綁定方式就需要改寫成：
javascript:

$("#Father").on('click','#ShowWord',function(){
    console.log("Hi!"); 
});

其實一個規則，就是首次選擇器所選擇的東西，盡量都要是已經在HTML ready好就會有的元件！

謝謝大家

A.D.的程式筆記