javascript - 动态为按钮添加点击功能

Question

我在表上有一个删除按钮，并且在该按钮上有一个单击事件监听器的 jquery。 这是代码

$(".delbtn").click(function () { 
    var count = 0;
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
        if( count == 0 ){delFund = item.innerHTML}
        if( count == 1) {delOrg  = item.innerHTML}
        if( count == 2) {stat = item.innerHTML }    
        count++
    }); 

//the below lines of codes would display how to show values on a browser like 
// firefox or chrome.
//console.log(delFund, delOrg);


    $(this).closest("tr").fadeTo(500, 0, function () {  
        $(this).remove(); 
    }); 


//update the item on the database table for deletion.
  $.ajax({type: "POST",
          url: "dbfunctions.jsp",  
          data: {TYPE:'D', fundval: delFund, orgval: delOrg, tuidval:tuid, status:stat }}).done(function( msg )
          {  
            //alert(msg);
          });

});

这一切都工作正常，我的问题是我查询一个数据库，然后使用该数据更新 html 表，并在表的最后一行添加一个新按钮。但是，当我单击该按钮时，该按钮没有响应。我相信是因为没有附加事件监听器。所以我的问题是如何更新按钮，以便我已经添加到所有先前按钮的事件监听器也附加到新的动态生成的按钮？

这是我如何将项目添加到表格末尾的代码片段。

$("#thisTable > tbody").append( 
                                        "<tr><td>"+thisfund.value+"</td>"+
                                        "<td>"+thisorg.value+"</td>"+
                                        "<td>"+'PENDING ACCESS'+"</td>" +
                                        "<td>"+"<a class='delbtn' href='#'>X</a>"+"</td></tr>");
        thisfund.value = "";// set the input boxes back to null
            thisorg.value  = "";

          });

Answer 1

.delbtn 上的点击事件不是实时事件，不会应用于新附加的元素。

根据您使用的 JQuery 版本，您可以使用以下方法之一来添加实时事件。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+