1

我陷入了一个有趣的问题。我有一个有 3 列和一些行的表。每行都添加了一个由 Drupal tablefield 模块支持的单击事件，该模块进行 ajax 调用以增加行数。在 2 列中，它接受数字数据，我的 jQuery 代码在第三列中进行计算。但是随着行数的增加，keyup 函数变得非常慢，但对于前几行它工作正常。下面是我的 jQuery 代码片段：

$('#edit-field-project-resrc-budget-fund input.tablefield-col-1, #edit-field-project-resrc-budget-fund input.tablefield-col-2').keyup(function(index,value){
    var sum_cell_column;
    var $tr = $(this).closest('tr');          
    var Row = $tr.index();
    var cell_value1=Number($('#edit-field-project-resrc-budget-fund input#tablefield_0_cell_'+Row+'_1').val().replace(/[^0-9\.]+/g,""));
    var cell_value2=Number($('#edit-field-project-resrc-budget-fund input#tablefield_0_cell_'+Row+'_2').val().replace(/[^0-9\.]+/g,""));
    sum_cell_column =(cell_value1+cell_value2);
    $('#edit-field-project-resrc-budget-fund input#tablefield_0_cell_'+Row+'_3').val(sum_cell_column).formatCurrency();
});

有人知道如何解决这个问题吗？

4

1 回答 1

1

我认为您会从该on方法中受益，这样您就不会附加这么多听众。在输入标签上使用on过滤器意味着只会附加一个事件侦听器。

见： http ://api.jquery.com/on/

签名：

.on( events [, selector ] [, data ], handler(eventObject) )

样本：

  $('#edit-field-project-resrc-budget-fund').on('keyup', 'input', function() {
    var $this = $(this),
        $tr = $this.closest('tr'),
        row = $tr.index();  

    var makeId = function(index, pos) {
      return 'tablefield_0_cell_' + index + '_' + pos;
    };

    var cell_value1=Number($('#'+ makeId(row, 1))
                           .val().replace(/[^0-9\.]+/g,""));
    var cell_value2=Number($('#'+ makeId(row, 2))
                           .val().replace(/[^0-9\.]+/g,""));
    var sum_cell_column =(cell_value1+cell_value2);

    $('#'+ makeId(row, 3))
      .val(sum_cell_column).formatCurrency();
  });

演示：

这是一个演示这一点的 JSBin。使用按钮创建许多行并注意性能很好。

http://jsbin.com/oMEKaKu/4/

于 2013-10-10T07:41:09.037 回答