1

我是 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 按钮。添加的删除链接不起作用，我创建的红线也没有应用，正如您在第二张图片中看到的那样。

4

7 回答 7

1

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

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

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

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

于 2012-10-02T06:37:41.870 回答
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);
});

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

于 2012-10-02T06:42:31.197 回答
0

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

或者您可以在创建行时在函数“addTableGradebkhdr”中显式添加处理程序

于 2012-10-02T06:37:10.123 回答
0

您应该记得$('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>';

你可以使用 jQuery.live

$('a[id^="del"]').live(function() {            
     var gradebkhdrid = $(this).attr('gradebkhdrid');
     deleteGradebkhdr(gradebkhdrid);
});
于 2012-10-02T06:38:55.263 回答
0

如果您希望表格在页面加载时有行，并且同时附加了前端函数，则可以使用 jquery.clone() 函数复制前一行并随后更改内容。这将为您节省一些代码，并将以前的侦听器应用于新元素。

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

$(newRow).insertAfter(row);
于 2012-10-02T06:42:35.847 回答
0

你可以试试这个

....
lr.after(row);
$("a[id^='del']:last").css('border', 'red 1px solid');
于 2012-10-02T06:47:40.027 回答
0

您可以通过 2 种方式做到这一点。

1）您可以在样式表中定义样式
2）您可以通过从实时绑定函数调用同一行来使用 javascript 应用样式。您可以从http://api.jquery.com/on/执行实时绑定使用 jquery 的 on() 函数在
这里，当您的脚本使用时，id 以“del”开头，您的添加元素应该具有以开头的删除链接 id 'del'，如果您使用的是相同的脚本。最好为该删除链接修复一个类并更新您的脚本行，如下所示

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

希望能帮助到你。

于 2012-10-02T06:48:11.567 回答