Question

我有这个jsfiddle，其中有一个表格可以接受姓名，电子邮件和手机号码。按下添加按钮后，新添加的按钮会被添加到按钮下方，同时还有2个引导图标编辑和删除。所以当单击编辑按钮它应该显示列值（这仅适用于前2行）但是当在新创建的记录上单击编辑按钮时它不显示任何内容。我可以知道错误在哪里吗？

这是编辑按钮单击的jquery代码

$('.icon-edit').click(function () {
      //alert("hi");
        $('#editReords').modal({show:true})
var $row = $(this).parents('tr');
var $columns = $row.find('td');
        //$columns.addClass('row-highlight');

        var values = "";
        jQuery.each($columns, function(i, item) {
            values =item.innerHTML;
            if(i==1){

                alert("name:"+values);
                //document.getElementById("name1").value = values;
            }
            else if(i==2){
                alert("emailID:"+values);
                //document.getElementById("date1").value = values;
            }
else if(i==3){
                alert("mobile:"+values);
                //document.getElementById("StartTime1").value = values;
            }});
    });
    $('#save').click(function () {
//alert("data saved");
    });
//edit records
    });

Answer 1

使用.on()

由于元素是动态添加的，因此无法将事件直接绑定到它们。因此，您必须使用Event Delegation。

$('#mytable').on('click','.icon-edit',function () { ..//code here })

语法

$( elements ).on( events, selector, data, handler );

fiddle Demo

Answer 2

使用on()委派事件，因为元素是动态添加的：

$('.icon-edit').click(function () {

应该成为：

$("#mytable").on('click', '.icon-edit', function () {

JSFiddle

注意：您也可以使用delegate()：

$("#mytable").delegate('.icon-edit', 'click', function() {

JSFiddle

Answer 3

哦，sry！我犯了一个错误的代码用这个：

请试用此代码：

$('#mytable').on('click','.icon-edit',function () {
      //alert("hi");
        $('#editReords').modal({show:true})
var $row = $(this).parents('tr');
var $columns = $row.find('td');
        //$columns.addClass('row-highlight');

        var values = "";
        jQuery.each($columns, function(i, item) {
            values =item.innerHTML;
            if(i==1){

                alert("name:"+values);
                //document.getElementById("name1").value = values;
            }
            else if(i==2){
                alert("emailID:"+values);
                //document.getElementById("date1").value = values;
            }
else if(i==3){
                alert("mobile:"+values);
                //document.getElementById("StartTime1").value = values;
            }});
    });
    $('#save').click(function () {
//alert("data saved");
    });
//edit records
    });

单击动态创建的编辑按钮不起作用

3 个答案: