Question

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

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

Initial table

问题是当我通过此代码添加新活动时：

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

，表格如下：

fasd

，你可以看到

未检测到最后一次删除

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

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

但是当我通过jQuery ajax函数添加一个新的Activity来提交表单并创建一个Table Row及其里面的元素包括Delete按钮。添加的删除链接不起作用，我创建的红线也没有应用，因为你可以看到第二张图像。

Answer 1

所以你说你想要将click事件附加到不存在的元素（将来会存在）？试试这个：

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

您可以使用所有这些行的持有者更改document，例如$( '#myTable' )...。

对于CSS：将自定义类添加到a标记，并在单独的样式表文件（或<style>标记）中正确设置样式。

Answer 2

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

在删除按钮中添加一个类，以便您可以使用纯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 3

你可以使用jQuery的实时功能：http://api.jquery.com/live/

或者你可以在创建行时在函数“addTableGradebkhdr”中明确地添加处理程序

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样式。你可以使用jquery的on（）函数进行实时绑定 http://api.jquery.com/on/
在这里，正如您的脚本所使用的那样，id以'del'开头，如果您使用相同的脚本，则您的添加元素应具有以'del'开头的删除链接ID。最好修复该删除链接的类并更新脚本行，如下所示

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

希望它有所帮助。

如何通过jQuery检测HTML中创建的新元素？

7 个答案: