Question

我陷入了一个有趣的问题。我有一个包含3列和一些行的表。每个行都添加了Drupal tablefield模块支持的click事件，该模块进行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();
});

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

Answer 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/

来自jQuery keyup函数的响应非常慢

1 个答案: