Change HTML code via jQuery

Question

I’m trying to enter the following code on this page to be able to change the text that appears when the customer subscribes to the modal newsletter, which appears when the customer is about to leave the page:

$(document).ready(function(){
    $('#btn-cadastre').on("click", function() {
        $('#modal_body_popup.modal-body-center .content-popup .newsletter-send').html('<i class="fa fa-check-circle"></i> Cadastro realizado com sucesso. Compre qualquer produto, seu cupom da <strong>Corda de Pular</strong> está garantido até o final da compra.');
    });
});

Unfortunately, I don’t know for what reason, it’s not working. I’ve tried several ways and nothing. I would like some help to be able to solve this :)

PS.: I am using Tampermonkey v4.5 to do the tests.

Answer 1

First I would put an Alert inside the click function to check if it is actually entering the function.

$(document).ready(function(){
    $('#btn-cadastre').on("click", function() {
        alert("Entrou");
    });
});

If you are entering the function you need to check that the selector is correct. In your case you have the #modal_body_popup.modal-body-center that is the parent of . content-popup parent of . newsletter-send (not necessarily 1st degree)

If you are not entering the function and the #btn-register selector is actually correct, maybe #btn-register is an item that was inserted into the page via javascript after you created your click function. In this case one of the solutions is to use the "$(Document). on":

$(document).ready(function(){
    $(document).on("click","#btn-cadastre", function() {
        $('#modal_body_popup.modal-body-center .content-popup .newsletter-send').html('<i class="fa fa-check-circle"></i> Cadastro realizado com sucesso. Compre qualquer produto, seu cupom da <strong>Corda de Pular</strong> está garantido até o final da compra.');
    });
});