Jquery mask in dynamically created fields

Question

Jquery mask in dynamically created fields

Navigation

#1 by (4 votes)
#2 by (4 votes)

5

I have a product values registration page, where I have an input field with a value mask in R $. But since this field is created dynamically after a search in the bd, the mask is only working on the first input. I know of a solution but it does not become friendly besides making the page slow. He wanted a practical and workable solution. Follow the code.

HTML:

<?php foreach ($produtos as $produto) {
    echo "<div class='produtos'>
        <div style='float:left;'><img src=".base_url()."uploads/produtos/".$produto->foto." title=".$produto->nome."></div>
                <div class='descricao_produto'>
                    <font size='4'>".$produto->nome."</font><br>
                    <font size='2'>".$produto->descricao."</font><br>
                    <input type='text' name='preco_produto' style='width:60px;' value='' placeholder='Preço' id='preco'>
                </div>
            </div>";
} ?>

JS:

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

html jquery

asked by anonymous 05.06.2014 / 21:08

2 answers

4

Instead of using the '#preco' id, try using a class, '.preco', for example.

Your code looks like this:

$(".preco").maskMoney({symbol:'R$ ', ...

05.06.2014 / 21:27

Libraries for communication between Arduino and Android Search system - Select within another

score 4 · Accepted Answer

A major flaw you're saying is putting the same id into multiple elements with this foreach() in your

Php

<?php foreach ($produtos as $produto) {
    echo "<div class='produtos'>
        <div style='float:left;'><img src=".base_url()."uploads/produtos/".$produto->foto." title=".$produto->nome."></div>
                <div class='descricao_produto'>
                    <font size='4'>".$produto->nome."</font><br>
                    <font size='2'>".$produto->descricao."</font><br>
                    <input type='text' name='preco_produto' style='width:60px;' value='' placeholder='Preço' class='preco'>
                </div>
            </div>";
} ?>

jQuery

$(document).ready(function(){
   $(".preco").maskMoney({symbol:'R$ ', showSymbol:true, thousands:'.', decimal:',', symbolStay: true});
});

You can check the result in this jsfiddle