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

Question

我是 jQuery 的新手，我想知道如何解决这个问题。我标记了删除以通过此代码显示链接:

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

问题是当我通过这段代码添加一个新的 Activity 时:

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; }

要处理添加元素上的点击事件，您可以使用委托(delegate):

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

事件处理程序将绑定(bind)在表上并在事件冒泡时捕获事件，因此它也适用于新添加的元素。