0

Estou a desenvolver um sistema em php e estou utilizando o Jquery para requisições Client Side. Tenho uma rotina simples para tratamento de inputs que não permite que o usuário digite um caractere não numérico. O script segue:

$('.only-numeric').on('keypress',function(event) {
        var tecla = (window.event) ? event.keyCode : event.which;
        if ((tecla > 47 && tecla < 58 || tecla == 0 || tecla == 44)) return true;
        else {
            if (tecla != 8) return false;
            else return true;
        }
    });

O mesmo é funcional, porém o problema ocorre quando preciso trabalhar dinamicamente. Tenho um select qua ao alterá-lo, atualizo uma div chamada characteristic_item, populando com os novos inputs através do método $.get(). E com método html() apresento em tela os novos valores.

inserir a descrição da imagem aqui

Tela com os campos atualizados

/**
     * Altera as caracteristicas do imóvel pela categoria do imóvel
     */
    $('#id_category').on('change',function (){

        var cat = $(this).val();
        var id = $('#id_immobile').val();
        var url = url_base + '/Imovel/lista_caracteristicas/' + cat + '/' + id;

        $('#characteristic').show();

        $.get(url,function (retorno) {

            if(retorno) {

                $('#characteristic_item').html(retorno);
            } else {
                $('#characteristic').hide();
            }
        });
    });

Acontece que atualizar os valores da DIV, o meu script que não aceita campos não numéricos não funciona mais. Fiz o uso do seletor .on(), porém não tive sucesso.

HTML do projeto:

 <select class="full-width" data-init-plugin="select2" name="id_category" id="id_category" required>
   <option></option>
</select>

<input type='text' class='form-control only-numeric' name='convenient' id='checkbox' maxlength='3' value=''>                        


Alguma sugestão de como resolver este caso?

9
  • porque é que, em vez de alterar a div nao recebe apenas os novos valores do select e adiciona-os, assim sendo, nunca altera o select e todos os eventos continuaram a funcionar... por exemplo: $("#id_category option").clear(); retorno.forEach(x=>$("#id_category").append("<option>"+x+"</option>")
    – balexandre
    15/04/2020 às 13:08
  • @balexandre o que é alterado não é os options do select. O select me retorna o ID da categoria que por sua vez popula a div que retorna as características do imóvel. Postei a imagem para facilitar. Veja select categoria alimenta os cômodos(características) que está na div #characteristic > #characteristic_item
    – Dagobe
    15/04/2020 às 14:03
  • 1
    Basta trocar $('.only-numeric').on('keypress',function(event) { por $('body').on('keypress', '.only-numeric', function(event) { que vai monitorar o keypress mesmo que sejam incluídos novos elementos com a classe only-numeric na página dinamicamente.
    – Benilson
    15/04/2020 às 19:17
  • 1
    Olá, realmente temos problemas em requisições Ajax que adicionam elementos no DOM. Uma forma paliativa de resolver seu problema, seria você recarregar a tela como um todo. Assim os eventos para os novos elementos seriam registrados. O que você poderia fazer tb é adicionar um evento onchange para essa classe e não permitir que o usuário coloque caracteres não numéricos. Não sei em que pé vc está no desenvolvimento dessa aplicação, mas recomendo fortemente vc utilizar alguma biblioteca como Angular React ou Vuejs. 17/04/2020 às 22:11
  • 1
    @Benilson adicione uma resposta com a sua solução, para o autor poder a escolher e lhe bonificar
    – Costamilam
    20/04/2020 às 19:42

1 Resposta 1

1

Você está criando novos campos na tela, mas o seu javascript já foi carregado e ele não vai identificar os novos elementos. Como não sei como está seu arquivo, segue o que você pode fazer.

Sugestão 1: Colocar o código direto no input que está sendo criado: <input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57">

Sugestão 2: 1. Empacote seu script de "permitir apenas numéricos" em uma função.


function minhaFuncao(){
   $('.only-numeric').on('keypress',function(event) {
        var tecla = (window.event) ? event.keyCode : event.which;
        if ((tecla > 47 && tecla < 58 || tecla == 0 || tecla == 44)) return true;
        else {
            if (tecla != 8) return false;
            else return true;
        }
    });
}

  1. Chame esse script toda vez que atualizar a tela:
//....código pra cima
if(retorno) {

                $('#characteristic_item').html(retorno);

                //Aqui vai a função
                minhaFuncao();

            } else {
                $('#characteristic').hide();
            }
//....código pra baixo
1
  • Obrigado pela resposta. Eu já tinha feito dessa forma, mas estava insatisfeito por que sabia que tinha uma forma melhor de fazer isso. De todo modo obrigado. A resposta do @Benilson esclareceu e resolveu o meu problema.
    – Dagobe
    17/04/2020 às 15:32

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 .