jQuery does not find td generated by Ajax

Question

I have a dynamic table fed via Ajax that returns the following code through a foreach:

<tr> 
    <td hidden value='{$conteudo['contId']}' id='contId'>
        {$conteudo['contId']}
    </td>
    <td> 
        {$conteudo['contNome']}
    </td>
    <td class='elementoNaDireita' >
        <button class='btn btn-outline btnExcluiArquivo'onclick='excluiArquivo();' name='btnExcluiArquivo' data-toggle='modal' data-target='#modalExcluiArquivo'>
            <span class='glyphicon glyphicon-floppy-remove btnExcluiArquivo'>
        </button>
    </td>
</tr>

And the function excluiArquivo() that’s the one:

function excluiArquivo(){   
    var contId = $('td:first', $(this).parents('tr')).text(); 
    console.log(contId);
    // document.getElementById('contId').value = contId;
    $("#contId").val(contId);

}

For some reason the variable contId does not receive the tag value <td>, receives nothing.

Could someone help me?

Answer 1

It turns out that the $(this) function does not reference the element clicked because it is not a function of the event fired onclick.

What you should do is send the element clicked through a parameter this:

onclick='excluiArquivo(this);'

And in the function receive this value:

function excluiArquivo(e){
                       ↑

And put a .trim() after .text() to delete spaces generated by HTML:

.text().trim()

Will stay like this:

function excluiArquivo(e){
    var contId = $('td:first', $(e).parents('tr')).text().trim(); 
    console.log(contId);
    // document.getElementById('contId').value = contId;
    $("#contId").val(contId);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
<tr> 
    <td hidden value='{$conteudo['contId']}' id='contId'>
        {$conteudo['contId']}
    </td>
    <td> 
        {$conteudo['contNome']}
    </td>
    <td class='elementoNaDireita' >
        <button class='btn btn-outline btnExcluiArquivo' onclick='excluiArquivo(this);' name='btnExcluiArquivo' data-toggle='modal' data-target='#modalExcluiArquivo'>
            <span class='glyphicon glyphicon-floppy-remove btnExcluiArquivo'>Apagar</span>
        </button>
    </td>
</tr>
</table>

Another thing: don’t put id in the element:

<td hidden value='{$conteudo['contId']}' id='contId'>
                                         ↑↑

'Cause you’ll be doubling that id in the loop, and repeating id’s is incorrect in HTML. You can switch to class if this attribute is actually useful:

<td hidden value='{$conteudo['contId']}' class='contId'>

Other:

That line $("#contId").val(contId); does not make sense, because this element is a td and receives no value via .val().