Add new input with autoNumeric class

Question

Add new input with autoNumeric class

Navigation

#1 by (1 votes)

1

I have my code:

var tr = '<tr class="tr_new">';
      tr +='<td><input type="text" name="txt_comi_cond1[]" class="moneda" size="10"></td>';
      tr +='<td><input type="text" name="txt_comi_cond2[]" class="moneda" size="10"></td>';
      tr +='<td><input type="text" name="txt_comi_porcen[]" class="porcentaje" size="10"></td>';
      tr +='<td><a href="#add" class="btn_del">-</a></td>';
    tr +='</tr>';

When adding with append (), the currency class does not work, that this code:

$('.moneda').autoNumeric({aSep: ',',aDec: '.',vMin: '0',vMax: '9999999.99'});

But if I execute this $ ('. coin'). autoNumeric () after making the append (), the previous input is altered, if I enter a number it duplicates it, some idea of how to add new input and apply this class?

javascript jquery html dom autonumeric

asked by jantoni 14.03.2017 в 01:10

source

1 answer

My program hangs showing the same result For loop in python

score 1 · Accepted Answer

Without knowing autoNumeric, for any plugin that operates on an input and is not idempotent, when adding a new element you should save a reference to it and apply the plugin only on it, and not on all the set of "brothers" that They are already in the DOM.

For example, in your use case, you could do:

var tr = $('<tr class="tr_new"></tr>');
  tr.append('<td><input type="text" name="txt_comi_cond1[]" class="moneda" size="10"></td>');
  tr.append('<td><input type="text" name="txt_comi_cond2[]" class="moneda" size="10"></td>');
  tr.append('<td><input type="text" name="txt_comi_porcen[]" class="porcentaje" size="10"></td>');
  tr.append('<td><a href="#add" class="btn_del">-</a></td>');

And then add to the table that you should have in your DOM

  tabla.append(tr);
  tr.find('.moneda').autoNumeric({...});

So to feed autoNumeric only with the row you just added and not with the whole table.

Considering the comment of @GustavoGarcia and given that autoNumeric has a destroy method, its solution is more precise for your use case.