$. ajax stops working the other jquery scripts

Question

Use this function to call a page:

$('#selector1').on('change',function(){
    $.ajax({
            type      : 'post',
            url       : 'servico_institucional.php', // aqui eu indico qual o arquivo que vai ser enviado essa variavel retorno
            data      : 'retorno='+$("#selector1").val,  //Cara, aqui eu pego o valor do input com o ID AJAX_INPUT E passo para uma variavel chamada    retorno
            dataType  : 'html',
            success : function(response){
                $('.form-servico').html(response);
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                    alert("Erro!");
            }
    }); 
});

However, when I call the page, the other scripts jquery stop working. Example: menu scripts, responsiveness among others.

How to fix this problem?

Answer 1

Speak, Diego! Blz?

Use Eval() to run scripts.

$('#selector1').on('change',function(){ 
    $.ajax({
        type: 'post',
        context: document.body,
        url: 'servico_institucional.php',
        data: 'retorno='+$("#selector1").val,
        dataType: 'html',
        success: function(response){
            $('.form-servico').html(response);
            $('.form-servico').find('script').each(function(i) {
                eval($(this).text());
            });
        }, error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Erro!");
        }
    });
});

If you have questions about how the function works, see this W3schools article: http://www.w3schools.com/jsref/jsref_eval.asp

Hug!