将行追加到表后的 jquery 函数

jquery functions after append row to table

本文关键字：jquery 函数 追加      更新时间：2023-09-26

我需要一些帮助，所以我希望你能帮助我。我有一个表格，单击按钮后以这种方式添加行。

var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";
$('#pl_table').append(row);

我还有jquery函数，当选中复选框时，它会向行添加一个类。因此，此类对背景颜色具有.css定义。

$('input:checkbox').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}

问题是on('change')添加的行未调用事件。对于加载页面时已经存在的行，将调用它。

为什么会这样？我的代码出了什么问题？谢谢你的帮助。

我遇到了同样的情况，下面给出了解决此问题的步骤，

a. 将 $（'input：checkbox'）.on（'change' 放入方法中，如下所示，

function BindDynamicEvents()
{
   $('input:checkbox').off('change').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}
}

b. 在 $（'#pl_table'）.append（row） 之后调用此方法，如下所示，

$('#pl_table').append(row);
BindDynamicEvents();

这将解决问题。

注意：请包含代码中所示的 .off（'change'），以避免事件多次触发。

如果你想保持当前的语法，试试这个：

    $('#pl_table').on('change', 'input:checkbox', function () {
        if (this.checked) {
            $(this).closest('tr').addClass('selected');
        }
        else {
            $(this).closest('tr').removeClass('selected');
        };

这样，您就不会在每个输入上添加事件，而只需将其添加到表上并在输入更改时触发它。对于动态生成的元素，我更喜欢这个。

试试这个：

var row = "<tr><td><input class='check_box' type='checkbox' onchange="change(this);"></input>some text<td></tr>";
$('#pl_table').append(row);

function change(element)
{
    if(element.checked) {
        element.closest('tr').addClass('selected');
     }
  else{
    element.closest('tr').removeClass('selected');
   }
}

我用起来并不好：

$(document).on('change','#elemnt',function(){
     //do something here
});

因此，无需在每次添加新行时调用BindDynamicEvents();。

从 jQuery 1.4 开始，.after()支持传递一个返回要插入的元素的函数。请参阅此链接。

相关文章：