Why do you execute the function when selecting the radio button, but do not select it, jquery?

Good morning. I have the following table with its records and each with its radio button:

<tbody id="formas_pagos" class="formas_pagos">
    <tr>
        <td class="nuevo-td">Descuento Adicional</td>
        <td class="nuevo-td">5,948.50</td>
        <td class="nuevo-td">
            <label class="label-radio item-content">
                <input type="radio" name="tipo_pago" class="tipo_pago" value="1"  />
                <span class="item-media">
                    <i class="icon icon-form-radio"></i>
                </span>
            </label>
        </td>
        <td class="label-cell">
            <input type="number" name="cantidad" class="cantidad" placeholder="Cantidad">
        </td>
    </tr>
    <tr>
        <td class="nuevo-td">Tarjeta de Credito</td>
        <td class="nuevo-td">5,948.50</td>
        <td class="nuevo-td">
            <label class="label-radio item-content">
                <input type="radio" name="tipo_pago" class="tipo_pago" value="2"  />
                <span class="item-media">
                    <i class="icon icon-form-radio"></i>
                </span>
            </label>
        </td>
        <td class="label-cell">
            <input type="number" name="cantidad" class="cantidad" placeholder="Cantidad">
        </td>
    </tr>
</tbody>

When executing the following function, I get the value of each of the rows in that table.

$('.formas_pagos').on('click','.tipo_pago', function(e){
    var tipo_pago = $(this).closest('tr');
    var valor_pago = tipo_pago.find('.tipo_pago').val();
    console.log(valor_pago);
    e.preventDefault();
});

The problem I have is that when selecting a radio button, it effectively sends the function to call and displays the information, but the detail is that it does not stay checked, at the moment I commented on the previous function, in this way keep the check.

Thank you in advance.