jQuery Mask does not read innerHTML

Asked

Viewed 286 times

0

I’m having trouble generating mask reading(jQuery) on elements generated via innerHTML. Only that the validator works and after trying to insert a die outside the mask it loads the page with the mask.

Here to Mask:

<script> 
$(document).ready( function() {     
     $.validator.addMethod("conceito", function (value, element) { 
     return ((/^((((([1]{1}[0]{1})\,([0]{1}))|((([0]{1})(\d){1}))\,(\d){1}))|([F]{1}))?$/i.test(value))); 
      }, "Digite uma m&eacute;dia v&aacute;lida (valores entre 00,0 e 10,0 ou o conceito F)"); 

      $('.conceito').mask("A9,9"); 
      $('#gerar_conceitos').validate({ 
        // Define as regras 
        errorElement: "em", 
        errorContainer: $(".error"), 
        errorPlacement: function(error, element) { 
          element.parent().append(error); 
        }, 
        success: function(label) { 
          label.text("Sem erros."); 
        }, 
        messages: { 
          conceito: { 
            required: "Digite uma média v&aacute;lida (valores entre 00,0 e 10,0)" 
          } 
        } 
      }); 

});   
</script>

And the innerHTML:

 <script type="text/javascript" language="javascript">            
 function msalterar(numerodematricula,conceito){
        c=document.getElementById('conceito['+numerodematricula+']');
        inner ="<label>M&eacute;dia:/label>";                       
                    inner += "<input type=\"text\" size \"4\" class=\"conceito\" name=\"conceito["+numerodematricula+"]\" value=\""+conceito+"\">";
                    c.innerHTML = inner;
                    dfinalizar();
            }

  </script>
javascript jquery jquery-masked-input

  • I don’t know if I understand the question very well but one observation: the input you are creating dynamically needs to receive the mask again. The mask is initially only applied to elements that already came in the page load.

  • Exact Joao Paulo.

  • Exactly, so have you already done this and the error continues? If you can see in the Browser Console(F12) if you accuse some javascript error.

  • Exactly it comes without the mask but when I try to send a data that does not have the mask it resets the page and reads the mask but I have to force sending something wrong to make it happen.

  • Try to put $('.concept'). Mask("A9,9"); between the line> c.innerHTML = Inner; and the line dfinalize();

1 answer

1

I’m not seeing where you use Function msalterar() and also don’t know what makes Function dfinalizar() but I imagine that after you dynamically generate a input, you shall apply again the mask. So try this or something:

   <script type="text/javascript" language="javascript">            
        function msalterar(numerodematricula,conceito){
            c=document.getElementById('conceito['+numerodematricula+']');
            inner ="<label>M&eacute;dia:/label>";                       
                    inner += "<input type=\"text\" size \"4\" class=\"conceito\" name=\"conceito["+numerodematricula+"]\" value=\""+conceito+"\">";
                    c.innerHTML = inner;
                    dfinalizar();

                     $('.conceito').mask("A9,9");
            }
  </script>

Browser other questions tagged javascript jquery jquery-masked-input

You are not signed in. Login or sign up in order to post.