Dynamically generated ajax tags are not viewed by jquery

Asked

Viewed 313 times

2

I am generating a dynamic table through AJAX that in one of the TDS there is a link.

<a href="#modalInserirDescontoCB" class="modal-trigger id_aluno">104490</a>

The link must perform two tasks:

  1. Open a modal containing a form (class modal-trigger of materializecss is responsible);
  2. Fill one of the form fields with the text of the clicked link.

The code of the second task:

$('.id_aluno').click(function () {
    $('#campo_aluno').val(this.text);
});

Where #campo_aluno is a input modal.

AJAX that makes the request:

tabela = $('#tabela-resultado-alunos');
filtro = $('#aluno').val();

if (filtro == '') {
    alert('Preencha o campo.');
    return false;
}

$.ajax({
    url: path + 'cb/lista-alunos',
    type: 'post',
    data: {
        get: filtro,
    },
    dataType: 'html',
    beforeSend: function () {
        tabela.html('Carregando...');
    },
    success: function (retorno) {
        tabela.remove('.bloco');

        // Atribui o retorno HTML para a div correspondente             
        if (retorno == 0) {
            $(tabela).html('Deu ruim');
        } else {
            $(tabela).html(retorno);
        }
    },
    error: function (erro, er) {                 
        $(tabela).html('Erro ' + erro.status + ' - ' + erro.statusText + '</br> Tipo: ' + er + '</p>');
    }
});

The PHP function that returns the HTML table:

$output = <<<HTML
    <table class="striped bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>NOME</th>
                <th>CPF</th>
            </tr>
        </thead>
        <tbody>
HTML;

foreach ($alunos as $a) {
    $output .= <<<HTML
        <tr>
            <td><a href="#modalInserirDescontoCB" style="cursor: pointer" title="Preencher número de aluno com esse valor" class="modal-trigger id_aluno">{$a->pf_id}</a></td>
            <td>{$a->nome}</td>
            <td>{$a->cpf}</td>
        </tr>
HTML;
}

$output .= '</tr></tbody></table>';

return $output;

When I click on one of the generated links, none of the functions are executed.
I also tried a simple $('.id_aluno').click(function(){console.log('funcionou')}); and nothing happens, as if the content generated was not seen by jquery.

php javascript jquery ajax

  • Put the generation code snippet of these tags, please.

  • I shall supplement the question.

3 answers

3

Thiago, I think the mistake is in 

$('.id_aluno').click(function () {
    $('#campo_aluno').val(this.text);
});

because the event is tied in the element that is already created, and as you mentioned, is created other elements dynamically.

The solution would be for you to link the event to jquery on.

$(".id_aluno").on("click", function(){
    $('#campo_aluno').val(this.text);
});

  • Same situation I commented with @Magichat here: http://answall.com/questions/178306/tags-generateddynamicamente-com-ajax-n%C3%A3o-s%C3%A3o-seen-by-jquery#comment368416_178308

3


You can use the method .on, successor of .delegate, since the element was added to the DOM after it was initially mounted and interpreted by the script. Try something like:

$(document).on('click', '.id_aluno', function(){     
    $('#campo_aluno').val(this.text);
    $('#meuModal').openModal(); 
});

  • That’s how it worked. My doubt now is how to open the modal of materializecss through jquery, since the example mentioned in the documentation itself does not work.

  • If the modal opens correctly, probably I can give as solved.

  • 1

    I tested it here, actually to open it would be something like $('#meuModal'). openModal(); If you can, please change your answer as I will be marking it as correct. Alias, thank you very much!

  • can you access this chat? http://chat.stackexchange.com/rooms/52133/jquery

2

Change that passage :

$('.id_aluno').click(function () {
    $('#campo_aluno').val(this.text);
});

for that:

$('.modal-trigger.id_aluno').click(function () {
    $('#campo_aluno').val(this.text);
});

  • Nothing happens, not even an error. Already with the static link still works, even as mentioned. Remembering that this only happens with the dynamically generated links.

  • Brother I understand, this generated dynamically, if you put this code that generates the modal code... we will search

  • I completed the question.

Browser other questions tagged php javascript jquery ajax

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