添加类添加新行

问题描述：

$("#btnAdd").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "View.aspx/AddResponsibility", 
     data: '{"ClientCode":"' + $("#hfClientCode").val() + '","ResponsibilityCode":"' + $("#txtResponsibility").val() + '"}', 
     async: true, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
     $('#tblRespon > tbody:last').append("<tr><td>" + $("#txtResponsibility").val() + "</td><td>" + $("#txtFullName").val() + "</td><td><a class='delete' id='btnDelete' name='btnDelete' value='" + $("#txtResponsibility").val() + "'>" + "Delete" + "</a></td></tr>"); 
     }, 
     error: function (msg) { 
     alert(msg.d); 
     } 
    }); 
    });

我需要添加一个类到'< a>'这是我添加的一个新元素。我上面所尝试的方式似乎并没有被工作作为函数添加类添加新行

$(".delete").click(function() {

不火，因为它与已经包含在页面上的元素通常不会。

我认为您认为最后一行会导致所有删除类的元素发生单击事件。这不是真的。它选择具有类删除的所有元素，然后添加单击事件。所以，这是你放置的地方。由于新元素处于异步循环中，所以应该使用事件绑定器。 – Jeroen 2012-07-26 16:23:14

答

您需要使用.on()功能如下：

$("#tblRespon").on("click",".delete",function(){

感谢您的确切答复。 – AzaRoth91 2012-07-26 16:45:18

答

这是因为锚标记您稍后注入到DOM。这意味着无论你绑定了点击功能，它都不会对新注入的元素产生任何影响。

解决方案是使用jQuery on。 on将适用于当前和futere元素。

更改此

$(".delete").click(function() { 
    //some code here 
})

到

$(document).on("click",".delete",function() { 
    //some code here 
})

on可从1.7+版本。如果您使用的是较早的版本，可以考虑使用live()

感谢您的回答和解释 – AzaRoth91 2012-07-26 16:45:42

答

如果我是正确的，你需要reasign的删除处理程序的添加元素：

success: function (msg) { 
     $('#tblRespon > tbody:last').append("<tr><td>" + $("#txtResponsibility").val() + "</td><td>" + $("#txtFullName").val() + "</td><td><a class='delete' id='btnDelete' name='btnDelete' value='" + $("#txtResponsibility").val() + "'>" + "Delete" + "</a></td></tr>"); 

     $('.delete').click(function(){ 
      //your code 
     }) 

},

我知道有更好的方法，但只需要知道，每次添加元素时，都应该为这些添加的元素注册处理程序

相关推荐