[jQuery] Events/live Click

今天在利用 jQuery 來動態新增表格看到 ptt Tony 的網站教學，可以用 parent 的方式，一層一層往上尋找到 tr 標籤，然後再整個 remove 掉，覺得相當好用，不過內容是直接網頁動態載入 delete button，現在我想弄的是新增一個 button，Click 之後，會新增一組 tr 選單，裡面包含 delete button，但是這個 button 利用底下的 jQuery 寫法，會沒辦法作用。

$(":input[value=delete]").click(
function(e){
$(this).parent().parent().remove();
}
);

原來看 Tony 是直接網頁載入 button，而我的狀況是後來人工點選產生的 button 跟 tr 標籤，所以問了一下 Tony，發現了一個解決方法，那就是利用

Events/live，這是新增在 1.3 版本的，他可以 bind 在現有的標籤，或者是未來新增的標籤上面，可以榜定的事件如下：

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup 沒有支援底下的事件：

blur, focus, mouseenter, mouseleave, change, submit

所以原本我的 html 語法是底下這樣寫的：

jQuery 是底下寫法：

$(document).ready(function(){
$("#add_plug").click(
  function(e){
    $("#plug").append(' ');
  });

$(":input[value=delete]").click(
  function(e){
    $(this).parent().parent().remove();
  });

});

上面的寫法只能新增動態表格，但是沒辦法動態減少表格，所以只好利用

Events/live 把 jQuery 的部份改寫成底下，就可以工作了喔

$(":input[value=delete]").live("click" ,function(){
  $(this).parent().parent().remove();
});

jQuery

See also