javascript – Why my Jquery code doesn't work on elements loaded with .load(), how do I load them?

Question:

What is the correct way to load my jQuery scripts along with .load().

I did it this way but I wanted another solution that would work with all the updates that occur with the form, such as removing products, changing cart quantity, etc:

// Adição ao Carrinho com retorno de plugins Jquery

$('#Carrinho').submit(function () {
    var $this = jQuery(this),
        dados = $this.serialize();
    jQuery.ajax({
        type: "POST",
        datatype: 'json',
        url: $this.attr('action'),
        data: dados,
        complete: function (update) {
            if ($(".list-inline button").hasClass("active")) {
                $("#cart-header").load("https://127.0.0.1/ #cart-header-container", function () {

                    // Estou atualizando meu carrinho, mas os demais scripts de remoção de produtos 
                    //ao carrinho, e alteração de quantidades precisam vir junto com está função, se o 
                    //usuários adicionar 10 produtos ao carrinho teria de repetir 10 vezes esse, e o 
                    //codigo ficaria muito longo, e não acredito ser a técnica correta.

                    // Abre - Fecha Sacola  
                    $(document).ready(function () {
                        $("#cart-right-nav").click(function () {
                            $("#cart-header").slideToggle("slow");
                        });
                    });
                    // Fim Abre - Fecha Sacola  
                });
                $("#cart-head-loader").fadeOut(1000);
            } else {
                $("#buy-btn").css("display", "block")
                $(".added-to-cart").css("display", "none");
            }
        },
        error: function (erro) {
            alert("Não adicionou a sacola.");
        }
    });
    return false;
});

Answer:

Thanks again to Bruno Augusto, who practically solved my problem!

              $.getScript('script-carrinho.js');

I managed to solve it just by calling the 'script-carrinho.js' file, through $.getScript(), inside the 'complete' callback, so the script necessary for this function to work is loaded every time it is executed.

$('#Carrinho').submit(function () {
    var $this = jQuery(this),
        dados = $this.serialize();
    jQuery.ajax({
        type: "POST",
        datatype: 'json',
        url: $this.attr('action'),
        data: dados,
        complete: function (update) {
            if ($(".list-inline button").hasClass("active")) {
                $("#cart-header").load("https://127.0.0.1/ #cart-header-container", function () {


                  $.getScript('script-carrinho.js');

                    // Consegui resolver apenas fazendo uma chamada do arquivo 'script-carrinho.js', 
                   // Através do $.getScript(), assim o script necessário para o funcionamento desta,
                  // função fica carregado.


                    // Abre - Fecha Sacola   --- Este script também entrou no arvuio 'script-carrinho.js'
                    $(document).ready(function () {
                        $("#cart-right-nav").click(function () {
                            $("#cart-header").slideToggle("slow");
                        });
                    });
                  // Fim Abre - Fecha Sacola --- Este script também entrou no arvuio 'script-carrinho.js'


                });
                $("#cart-head-loader").fadeOut(1000);
            } else {
                $("#buy-btn").css("display", "block")
                $(".added-to-cart").css("display", "none");
            }
        },
        error: function (erro) {
            alert("Não adicionou a sacola.");
        }
    });
    return false;
});
Scroll to Top
AllEscort