Question

我在表上有一个删除按钮，在按钮上单击eventlistener时有一个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上的click事件不是实时事件，也不适用于新添加的元素。

根据您使用的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+

Answer 2

试试这个男人：

API：http://api.jquery.com/on/

.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素集。

任何事件名称都可以用于events参数。 jQuery将通过浏览器的标准JavaScript事件类型，在浏览器由于用户操作（例如点击）而生成事件时调用处理函数。

在您的情况下，即使class='delbtn' .on事件发生的新tr也会将其接管。

希望这有帮助，

<强>码

$(document).on('click','.delbtn',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++
    });

Answer 3

试试这个

$(newButton).bind('click',function(){...})

动态地向按钮添加单击功能

3 个答案: