real money mask in php jquery array

Question

I have a field to insert a monetary value into an array but the mask only works in the first input, when I add a new line the mask does not work.

In this line $("#finTpVal"). maskMoney({Symbol:'R$ ', already tested with input id and class...

The code:

<script type="text/javascript" src="jquery.min.224.js"></script>
<script type="text/javascript" src="jquery.mask.money.js"></script>

<table border="0" cellspacing="0" cellpadding="0" id="table-data">
   <tr>
      <td height="25" align="center" valign="middle">Tipo</td>
      <td height="25" align="center" valign="middle">Valor</td>
      <td height="25" align="center" valign="middle">&nbsp;</td>
      <td height="25" align="center" valign="middle">&nbsp;</td>
   </tr>
   <tr class="tr_clone">
      <td height="30" align="center" valign="middle">
      <select name="tipo[]" id="tipo>
      <option value="">-</option>
      <option value="1">Tipo 1</option>
      <option value="2">Tipo 2</option>    
      </select>
      </td>
      <td height="30" align="center" valign="middle">       
      <input type="text" name="valor[]" id="valor" class="maskreal" value="">
      </td>
      <td height="30" align="center" valign="middle">
      <span class="tr_clone_add" style="cursor:pointer;" title="Adicionar">
      +</span>
      </td>
      <td height="30" align="center" valign="middle">
      <span class="tr_clone_del" style="cursor:pointer;" title="Apagar">
      -</span>
      </td>
   </tr>
</table>

<script>
(function($) {
  $(function() {
      $("#finTpVal").maskMoney({symbol:'R$ ', 
        showSymbol:true, 
        thousands:'.', 
        decimal:',', 
        symbolStay: true
    });      

      var table = $('#table-data');
      table.on('click','.tr_clone_add', function(e) {
          e.preventDefault();
          var thisRow = $(this).closest('tr');
          var clone   = thisRow.clone();
          clone.find('#finTpVal').val('');
          thisRow.after(clone);
          return false;
      });
      table.on('click','.tr_clone_del', function(e) {
          e.preventDefault();
          if ($('.tr_clone').length > 1) {
              var thisRow = $(this).closest("tr");
              thisRow.remove();
          }
          return false;
      });
  });
})(jQuery);
</script>

Answer 1

You need to call again the method .maskMoney, you can create a method that calls this other method and within it configure all your masks, and whenever you add a new field, just call UpdateMasks follows the example code:

function UpdateMasks()
{
     $("#finTpVal").maskMoney({symbol:'R$ ', 
         showSymbol:true, 
         thousands:'.', 
         decimal:',', 
         symbolStay: true
     });
}

Inside the event that is calling when tr_clone_add is clicked you can call the configured function UpdateMasks.

  table.on('click','.tr_clone_add', function(e) {
      e.preventDefault();
      var thisRow = $(this).closest('tr');
      var clone   = thisRow.clone();
      clone.find('#finTpVal').val('');
      thisRow.after(clone);
      UpdateMasks();//atualizando as mascaras.
      return false;
  });

Answer 2

As I put in the comment, you need to run again the .maskMoney so that the element that was cloned also works.

Here’s an example (I used the class to not need to refer to the ID, and also put the options in a variable to avoid duplicating the code):

var ops = {symbol:'R$ ', 
        showSymbol:true, 
        thousands:'.', 
        decimal:',', 
        symbolStay: true
    }
$(".maskreal").maskMoney(ops);      

      var table = $('#table-data');
      table.on('click','.tr_clone_add', function(e) {
          e.preventDefault();
          var thisRow = $(this).closest('tr');
          var clone   = thisRow.clone();
          clone.find('#finTpVal').val('');
          thisRow.after(clone);

          $(".maskreal").maskMoney(ops);  
          return false;
      });
      table.on('click','.tr_clone_del', function(e) {
          e.preventDefault();
          if ($('.tr_clone').length > 1) {
              var thisRow = $(this).closest("tr");
              thisRow.remove();
          }
          return false;
      });

See here the example working: http://jsfiddle.net/xpvt214o/514868/