Javascript 如何检测jQuery在HTML中创建的新元素？

我是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"]').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);
        });     
  });
});

红色边框不是桌子的一部分。我用它来跟踪事件/错误捕获。正如您在第一张图片中看到的，页面已加载，所有删除链接都标记为红色。这意味着删除所有工作的链接

---

但是当我通过jqueryajax函数添加一个新的活动来提交表单时，我创建了一个表行及其包含Delete按钮的元素。添加的删除链接不起作用，我创建的红线也没有应用，正如您在第二张图像中看到的那样

您可以使用jQuery的live功能：

---

或者，当行正在创建时，您可以在函数“addTableGradebkhdr”中明确添加处理程序

，因此您的意思是希望将

单击

事件也附加到不存在的元素（将来将存在）？试试这个：

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

您可以使用所有这些行的持有者来更改

文档

，例如

$（“#myTable”）…

至于CSS：将自定义类添加到

a

标记中，并在单独的样式表文件（或

标记）中正确设置其样式。

您应该回忆

$（'a[id^=“del”]'）.CSS（'border'，'red 1px solid'）您没有使用CSS，所以边框将仅应用于您通过jQuery选择的已添加元素

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

或

您可以直接设置边框颜色

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

这个问题有两个方面，有两种不同的解决方案

向“删除”按钮添加一个类，以便您可以使用纯CSS将其作为目标，而无需直接更改元素的样式：

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

要处理添加元素上的单击事件，请使用委托：

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

事件处理程序将绑定到表上，并在事件冒泡时捕获事件，因此它也适用于新添加的元素。
如果您希望表在页面加载时有行，并且同时附加前端函数，则可以使用jquery.clone（）函数复制前一行，然后更改内容。这将为您节省一些代码，并将以前的侦听器应用于新元素

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

$(newRow).insertAfter(row);

你可以试试这个

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

您可以通过两种方式来实现这一点

1） 您可以在样式表中定义样式

2） 您可以通过从live binding函数调用同一行来应用javascript样式。您可以使用jquery的on（）函数从


在这里，由于您的脚本使用的是以“del”开头的id，如果您使用的是相同的脚本，那么您的添加元素应该具有以“del”开头的delete链接id。最好为该删除链接修复一个类，并更新脚本行，如下所示

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

希望有帮助。
关于添加红色边框，为什么不在CSS样式表中添加？然后它将自动应用于动态添加的元素。你不需要JS（或jQuery）来做这件事。它还没有被弃用。将被弃用。现在，它可以工作了。@prem引用文档：
从jQuery 1.7开始，.live（）方法已被弃用。
你明白这个词的意思吗？这意味着它确实有效，但不会在将来的某个地方起作用。因此应该避免。这对我来说很有效！我认为问题在于代码：
$（'a[id^=“del”]”）.each（function（）{$（this）.on（“单击”，function（）{var gradebkhdrid=$（this.attr（'gradebkhdrid'）；deleteGradebkhdr（gradebkhdrid）；}）；}）一个更好的方法是使用Javascript变异事件的@Cody:为什么这是一个更好的方法？当您可以设置CSS和事件处理程序而不需要查找更改时，为什么还要查找更改呢？此外，在你链接到它的页面上说，它们被弃用是因为设计有缺陷…@Cody-它们不仅被弃用，而且从未跨浏览器工作过。
$('a[class="deleteLink"]').css('border','red 1px solid');