очень медленный ответ от функции jQuery keyup

Question

У меня возникла интересная проблема. У меня есть таблица с тремя столбцами и несколькими строками. Каждая строка добавляется с событием клика, которое поддерживается модулем таблицы таблиц Drupal, что делает вызов 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/