javascript function not responding after ajax request ( xmlhttprequest)

Question

I have the following functions:

$(function() { //add new language 
    var lg_select = $('#add_language');
    var table = lg_select.parent();
    var table_head = $('form[name=languageData] tr').has('th')
    $('.cv_addLang').click(function(e) {
        e.preventDefault();
        if(table_head.is(':hidden')) {
            $('.nolangauge').hide();
            table_head.show();
        }
        var new_lang = lg_select.clone();
        new_lang.find('select[disabled=disabled]').removeAttr('disabled');
        new_lang.find('select[name=new_language]').attr('name', 'language[]');
        new_lang.find('select[name=new_level]').attr('name', 'language_level[]');
        new_lang.appendTo(table).show();
    })
})

function getXMLHttpRequestObject() { //ajax
    var ajax = false;
    if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
            }
        }
    }
    return ajax;
}

$(function() { //ajax
    var ajax = getXMLHttpRequestObject();
    if(ajax) {
        $('div').delegate(".but_cv_w", "click", function(e){
            e.preventDefault();
            var div_content = $(this).parent().parent();
            if(div_content) {
                var x=$(div_content).attr('id');
                //alert(x);
                //alert(div_content);
                var path = $(this).attr('href');
                //alert(path);
                ajax.open('get', path + '&ajax=true');
                ajax.onreadystatechange=function() {
                    if(ajax.readyState == 4) {
                        if((ajax.status == 200) || (ajax.status == 304)) {
                            $(div_content).html(ajax.responseText);
                        } else {
                            $(this).click;
                        }
                    }
                }
                ajax.send(null);
                return false;
            }
        })
    }
})

The problem is that both new language and ajax are working fine but separated. If I delete the ajax function then new language function is working but if I keep the ajax function and make an ajax request then the other function (new language) isn't working anymore. It seams that after an ajax request the new language function dosen't work the seam as befor the ajax request. The new language function is supposed to add new inputs for languages, the "cv_addLang" is the calss of an button which appears on the page after an normal server request or after a ajax request?

Hope someone could help me with this ?? Thanks for any help!

Answer 1

The Problem lies on the add new language function. Instead of an click event it is necesary to use delegate event and so the function should look like this in order for it to work.

$(function () { //add new language
$("body").delegate('.cv_addLang','click',function(e) {
    e.preventDefault();
    var lg_select = $('#add_language');
    var table = lg_select.parent();
    var table_head = $('form[name=languageData] tr').has('th');
    if(table_head.is(':hidden')) {
        $('.nolangauge').hide();
        table_head.show();
    }
    var new_lang = lg_select.clone();
    new_lang.find('select[disabled=disabled]').removeAttr('disabled');
    new_lang.find('select[name=new_language]').attr('name', 'language[]');
    new_lang.find('select[name=new_level]').attr('name', 'language_level[]');
    new_lang.appendTo(table).show();
});

})