如何檢測由jQuery在HTML中創建的新元素？

Question

我是jQuery新手，我很驚訝如何解決這個問題。我打上刪除，顯示通過這個代碼的鏈接：

$('a[id^="del"]').css('border','red 1px solid'); 

問題是，當我添加了一個新的活動通過這個代碼：

function addGradebkhdr() { 

var formData = formToJSON(); 

    $.ajax({ 
     type: 'post', 
     contentType: 'application/json', 
     url: 'http://samle.com/api', 
     dataType: "json", 
     data: formData, 
     success: function(data, textStatus, jqXHR){ 
     **addTableGradebkhdr(data);** 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
     // handle error 
     } 
    }); 
} 

function addTableGradebkhdr(data) { 

    var lr = $(".tb-gradebkhdr tbody tr:last-of-type"); 
    var no = parseInt($(".tb-gradebkhdr tbody tr:last-of-type td:first-of-type").text()); 
    var ctr = no + 1; 
    var d = new Date(data.date); 
    var day = d.getDate(); 
    var month = d.getMonth() + 1; //Months are zero based 
    var year = d.getFullYear(); 
    var sDate = month + "/" + day + "/" + year; 

    var row = '<tr id="'+ data.id +'" ><td>'+ ctr +'</td>'; 
      row += '<td>'+ data.criteria_name +'</td>'; 
      row += '<td>'+ data.rawhigh +'</td>'; 
      row += '<td>'+ sDate +'</td>'; 
      row += '<td>'+ data.quarter +'</td>'; 
      row += '<td>'+ data.remarks +'</td>'; 
      row += '<td>'; 
      row += '<a gradebkhdrid="'+ data.id +'" id="edit-'+ data.id +'" href="#">Edit</a> '; 
      row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>'; 
      row += '</td></tr>'; 
     lr.after(row); 


} 


$(document).ready(function(){ 

$("#frmBtn-grbkhdr-save").on('click',**addGradebkhdr**); 

$('a[id^="del"]').each(function(){ 
    $(this).on("click",function() { 
      var gradebkhdrid = $(this).attr('gradebkhdrid');  
     deleteGradebkhdr(gradebkhdrid); 
     });  
    }); 
}); 

和表變成這個樣子：

爲您可以看到最後一個刪除未被檢測到

$('a[id^="del"]').each(function(){ 
    $(this).on("click",function() {    
     var gradebkhdrid = $(this).attr('gradebkhdrid'); 
     deleteGradebkhdr(gradebkhdrid); 
    }); 
}); 

紅色邊框不是表格的一部分。我用它來跟蹤事件/錯誤陷印。正如您在第一張圖片中看到的，該頁面已加載，並且所有刪除​​鏈接都標記爲紅色。這意味着刪除鏈接全部工作。

但是當我通過jQuery ajax函數添加一個新的Activity來提交表單並創建了一個Table Row及其內部的元素，其中包括Delete按鈕。添加的刪除鏈接不起作用，我創建的紅線也未應用，因爲您可以看到第二張圖片。

Answer 1

有兩個方面對這個問題，有兩個獨立的解決方案。

添加類刪除按鈕，這樣就可以用簡單的CSS瞄準他們，而不直接更改元素的樣式：

row += '<a gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" class="delButton" href="#">Delete</a>'; 

現在你可以使用這個CSS設置邊界，它會也適用於新添加的元素。

.delButton { border: 1px solid red; } 

來處理添加的元素單擊事件您使用委託：

$('.tb-gradebkhdr').on('click', 'a[id^="del"]', function(){ 
    var gradebkhdrid = $(this).attr('gradebkhdrid');  
    deleteGradebkhdr(gradebkhdrid); 
});  

的事件處理程序將放在桌子上的約束，當它冒泡捕獲的事件，所以它會爲工作新添加的元素。

Answer 2

可以USEE jQuery的現場功能：http://api.jquery.com/live/

，或者你可以明確地在功能「addTableGradebkhdr」添加處理程序時行創建

Answer 3

那麼，你是說，你要附加click事件不存在的元素（這將在未來存在）？所有這些行的持有人

$(document).on('click', 'a[id^="del"]', function(){  
    var gradebkhdrid = $(this).attr('gradebkhdrid'); 
    deleteGradebkhdr(gradebkhdrid); 
}); 

您可以更改document，例如$('#myTable')...：試試這個。

至於CSS：將自定義類添加到a標籤，並在單獨的樣式表文件（或<style>標籤）中正確設置樣式。

Answer 4

你應該記得$('a[id^="del"]').css('border','red 1px solid');你沒有使用CSS，所以邊界將被應用到已經添加的元素，只有你通過jQuery來選擇。

...your code 
.... 
lr.after(row); 
$('a[id^="del"]').css('border','red 1px solid'); 

OR

您可以直接設置邊框顏色

row += '<a style="border:red 1px solid;" gradebkhdrid="'+ data.id +'" id="del-'+ data.id +'" href="#">Delete</a>';   

您可以使用jQuery.live

$('a[id^="del"]').live(function() {    
    var gradebkhdrid = $(this).attr('gradebkhdrid'); 
    deleteGradebkhdr(gradebkhdrid); 
}); 

Answer 5

如果您希望您的表在頁面加載時有行，並且您的前端功能同時連接，則可以使用jquery.clone（）函數複製以前的行並在之後更改內容。這將爲您節省一些代碼，並將先前的偵聽器應用於新元素。

var newRow = $("table tr:last").clone(true); 
$(newRow).find("td:eq(0)").html("new data for column 1"); 

$(newRow).insertAfter(row); 

Answer 6

你可以用這個

.... 
lr.after(row); 
$("a[id^='del']:last").css('border', 'red 1px solid'); 

Answer 7

嘗試你可以通過兩種方式做到這一點。

1）您可以在樣式表中定義樣式
2）您可以通過調用實時綁定函數中的同一行來將樣式應用於javascript。你可以用 http://api.jquery.com/on/
這裏，當你的腳本正在使用，id開始於'del'，你的添加元素應該有'del'開頭的刪除鏈接id，如果你正在使用相同的腳本。它更好，你修復該類刪除鏈接並更新您的腳本行如下

$('a[class="deleteLink"]').css('border','red 1px solid'); 

希望它有幫助。