-1

Tenho um código que utilizo o maskmoney.

Estou utilizando o cloneNode para copiar uma div, isso funciona, porém o input que uso maskmoney não funciona nos campos copiados.

Alguém consegue ajudar?

//script mask money
$(document).ready(function(){
    $("#valor").maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:""});
});

Aqui está a função de clonar

<script>
    function duplicarCampos(){
    var clone = document.getElementById('origem').cloneNode(true);
    var destino = document.getElementById('destino');
    destino.appendChild (clone);
    
    var camposClonados = clone.getElementsByTagName('input');
            
    for(i=0; i<camposClonados.length;i++){
        camposClonados[i].value = '';
    }
}

function removerCampos(id){
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.childNodes[0]);
}

Aqui está o input que uso o maskmoney

<input type="text" name="valor[]" id="valor" style="text-align:center; width: 20%"/>    
1
  • clonar um elemento com maskMoney não vai fazer o elemento clonado ter o mesmo comportamento, é preciso aplicar o maskMoney ao novo elemento 8/04/2021 às 8:35

1 Resposta 1

0

Ao criar um novo elemento, é necessário associar os eventos, e o maskMoney também, por isso após clonar e adicionar o DOM, basta usar fazer isso.

No exemplo abaixo, coloquei a associação do maskMoney numa function para poder ser chamada multiplas vezes, também removi o ID (poderia atribuir um aleatório ou sequencial também) para evitar ter mais de um elemento com o mesmo ID.

$("#clonar").click(function() { duplicarCampos(); });

aplicarMaskMoney($("#valor"));

// function para aplicar o maskMoney
function aplicarMaskMoney(elemento) {
    elemento.maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:""});
}

function duplicarCampos(){
    var clone = document.getElementById('valor').cloneNode(true);
    
    // para evitar mais de um elemento com o mesmo ID e "zera" o valor
    clone.removeAttribute("id");
    clone.value = "";
    
    var destino = document.getElementById('destino');

    destino.appendChild (clone);
    
    // após adicionar ao DOM, aplica o maskMoney
    aplicarMaskMoney($(clone));
    
    // restante do código aqui
}
#destino {
  display: inline-block;
  width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<input type="text" id="valor"  name="valor[]" />
<br />
<button id="clonar">Clonar</button>
<br />

<div id="destino"></div>

EDIT: para clonar todo o elemento contendo várias elementos dentro, as seguintes mudanças podem ajudar:

  • remover os ids dos elementos que poderão ser clonados
  • adicione name ou class para ajudar a fazer um seletor para acessar esses elementos:

var origem = $("#origem");
aplicarMaskMoney(origem);

// function para aplicar o maskMoney
function aplicarMaskMoney(obj) {
    $(obj).find(".valor").maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:""});
}

function duplicarCampos(){
    var clone = document.getElementById('origem').cloneNode(true);
    var destino = document.getElementById('destino');
    destino.appendChild (clone);

    // pega os elementos "valor" e limpa
    $(clone).find(".valor").val("");
    // aplica a máscara
    aplicarMaskMoney(clone);
}

function removerCampos(id){
    var node1 = document.getElementById('destino');
    node1.removeChild(node1.childNodes[0]);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<div class="form-body" id="origem">
   <div class="row" >
      <select name="empresa[]" class="select empresa" style="width: 30%">
         <option value='00'>Selecione Empresa</option>
         <?php
            $result = mysqli_query(...);
            while($row = mysqli_fetch_array($result) ){
            echo "<option value='".$row['id']."'>".$row['NomeEmpresa']."</option>";
            }
            ?>
      </select>
      <select name="filial[]" class="select filial" style="width: 30%">
         <option value="0">Escolha uma filial</option>
      </select>
      <input type="text" name="valor[]" class="valor" style="text-align:center; width: 20%"/>  
      <img  src="img/add.png" width="20px" height="20px" style="cursor: pointer;" onclick="duplicarCampos();">
      <img  src="img/del.png" width="20px" height="20px" style="cursor: pointer;" onclick="removerCampos(this);"> 
   </div>
</div>
<div id="destino">
</div>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .