jquery - Replacing text on div

Question

I have a form that if I select certain values from a <select> and <input>, the jquery goes in action.

I have the following div:

<div class="alert alert-info"  role="alert">
    <div id="holders_1_contracts">
        Contratos deste Titular: &nbsp; <i class="fal fa-spinner fa-spin-2x"></i>
    </div>
</div>

If the <select id="holders_1_partner_type_id"> changed, this enter in action:

$('#holders_1_partner_type_id').change(function()
{
    $("#holders_1_contracts").replaceWith('Contratos deste Titular: &nbsp; <i class="fal fa-spinner fa-spin-2x"></i>');
});

If the <input id="holders_1_partner_nr", changes, this enter in action:

$('#holders_1_partner_nr').change(function()
{
    let partner_type_id = $("#holders_1_partner_type_id").val();
    let partner_nr = $("#holders_1_partner_nr").val();

    switch(partner_type_id) {
        case '2':
            $.ajax({
                url: '...',
                type: 'get',
                data: {
                ..
                },
                success: function(response)
                {
                    let data = JSON.parse(response);

                    if (data.success !== false) {
                        Swal.fire({
                            icon: 'success',
                            title: 'OCC Encontrado!',
                            text: 'Os campos foram pré-preenchidos. Valide os dados antes de avan?ar.',
                            showConfirmButton: true,
                            allowOutsideClick: true,
                        });

                        $("#holders_1_contracts").replaceWith(data.contracts);

                    } else {
                        Swal.fire({
                            ...
                        });
                    }
                },
            });
            break;

        default:
            break;
    }
});

Basically, if the user enters the holders_1_partner_nr (number), the application loads the contract numbers from the database. If the holders_1_partner_type_id changes, the jquery should replace all loaded contracts with a text and a spinner.

The fact is, this code only works 1 time, If I load the contracts 1 time.

What am I doing wrong? My jquery/js skills aren't really the best.

Regards and Thanks!

Answer 1

In each case, you're replacing/removing the element the event lister is attached to.

Please change:

.replaceWith( ..... );

To:

.html( ..... );