jQuery1.7.2 compatibility issue for jQuery 3.3.1

Question

I am layman in JS, but I need an urgent application and I found one that suits me, just make the adaptations. I have the following code below:

function id( el ){
        //return document.getElementById( el );
        return $( el );
}
function calcTotal( un01, qnt01 )
{
        return un01 * qnt01;
}
function getElementParent(event){
    return event.srcElement.parentNode.parentNode.getAttribute('id');
}
function getValorUnitario(elParent){
    return $('#'+elParent+' .class_unit input').val();
}
function getQuantidade(elParent){
    return $('#'+elParent+' .class_quant input').val();
}
function setFieldTotal(elParent, valueUnit, valueQuant){
    id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant));
    setTotalFinal();
}
function setTotalFinal(){
    
    var total = 0;
    $('#table-shop tr .class_total input').each(function(){
        if(this.value != ''){
        var valor = this.value;
        total += parseInt(valor);
        }
    });
    $('#total .value_total').html(total);
}
$(document).ready(function(){
        id('#table-shop tr .class_unit').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });      
       
        id('#table-shop tr .class_quant').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });
});

<script src="https://code.jquery.com/jquery-3.3.1.js" ></script>

<form action="" method="post">
            <table id="table-shop">
                <tr id="line1">
                    <td class="class_unit">Valor Unitário 01:<input type="text" name="valor_unitario01" id="valor_unitario01" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt01" id="qnt01" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total01" id="total01" readonly="readonly" /></td>
                </tr>

                <tr id="line2">
                    <td class="class_unit">Valor Unitário 02:<input type="text" name="valor_unitario02" id="valor_unitario02" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt02" id="qnt02" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total02" id="total02" readonly="readonly" /></td>
                </tr>

                <tr id="line3">
                    <td class="class_unit">Valor Unitário 03:<input type="text" name="valor_unitario03" id="valor_unitario03" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt03" id="qnt03" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total03" id="total03" readonly="readonly" /></td>
                </tr>

                <tr id="line4">
                    <td class="class_unit">Valor Unitário 04:<input type="text" name="valor_unitario04" id="valor_unitario04" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt04" id="qnt04" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total04" id="total04" readonly="readonly" /></td>
                </tr>

                <tr id="line5">
                    <td class="class_unit">Valor Unitário 05:<input type="text" name="valor_unitario05" id="valor_unitario05" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt05" id="qnt05" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total05" id="total05" readonly="readonly" /></td>
                </tr>
            </table>
            <div id="total">Total: <span class="value_total"></span> </div>
    <div id="total">Total: <input class="value_total" readonly>
</div>
</form>

However, if I use the jQuery 3.3.1 he makes that mistake:

"Uncaught Typeerror: Cannot read Property 'parentNode' of Undefined"

If I use the jQuery 1.7.2 works! If I put the following reference:

script src="https://code.jquery.com/jquery-1.7.2.js" /script
script src="https://code.jquery.com/jquery-3.3.1.js" /script

Note: I took the < > above, to be able to quote here.

doesn’t work either. Can someone help me, please?

Source of the code: https://forum.imasters.com.br/topic/519699-multiplicar-quantidade-por-pre%C3%A7o-e-display-no-total/

Answer 1

But what would be the problem in using jQuery 1.7.2? Finally, by running the code in the Debugger it is possible to verify that jQuery 3.3.1 gives you a reference to the element in which the Event System is located via property target instead of srcElement.

Then simply refactor the getElementParent function to

function getElementParent(event){
    return event.target.parentNode.parentNode.getAttribute('id');
}