facebox not working after $.post

Question

i'm using facebox to open a remote page, i includedjQuery, facebox.js and facebox.css and put it in document.ready like this

jQuery(document).ready(function ($) {

$('a[rel*=facebox]').facebox({
    loadingImage: 'imgs/loading.gif',
    closeImage: 'imgs/closelabel.png'
   });
});

everything works till i call this function

function lecFunc(year)
{
        var name = year + '_lec';
        $.post('php/scripts/lecClickScript.php', { matYear: year, matType: name      }, function (data) {
            document.getElementById("lecs_tbody").innerHTML = data;
            document.getElementById("lecs_boxbody").style.display = 'block';
            document.getElementById("qus_boxbody").style.display = 'none';

        });

    }

the facebox doesn't work any more

EDIT :: Solved
Actully the problem was that i was using two jQuery versions then i read this qustion Can-i-use-multiple-versions-of-jquery-on-the-same-page

then added this code by the exact sequence

    <script src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/facebox.js" ></script>
    <script type="text/javascript" src="js/onClick.js" ></script>
    <script>var $j = jQuery.noConflict(true);</script>

    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log($().jquery); // This prints v2.1.3
            console.log($j().jquery); // This prints v1.4.2
        });
   </script>

and in onClick.js file

jQuery(document).ready(function ($) {

    $('a[rel*=facebox]').facebox({
        loadingImage: 'imgs/loading.gif',
        closeImage: 'imgs/closelabel.png'
    });
});



function lecFunc(year) {
    var name = year + '_lec';
    $.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
        document.getElementById("lecs_tbody").innerHTML = data;
        document.getElementById("lecs_boxbody").style.display = 'block';
        document.getElementById("qus_boxbody").style.display = 'none';

        $j('a[rel*=facebox]').facebox({
            loadingImage: 'imgs/loading.gif',
            closeImage: 'imgs/closelabel.png'
        });
    });

}

Answer 1

I'm not sure which element you are expecting this within the $.post handler function to be, but it won't work like that as it will refer to a different scope. You need to look for the a elements within the HTML you appended to the page. Try this:

function lecFunc(year) {
    var name = year + '_lec';
    $.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
        $("#lecs_tbody").html(data).find("a[rel*=facebox]").facebox();
        $("#lecs_boxbody").show()
        $("#qus_boxbody").hide();
    });
}

Answer 2

You're initializing facebox when the page is loaded. In this case, the facebox plugin will be applied only to those elements that are already available in the DOM. After you insert the content with AJAX, the new content won't be initializied with facebox. In order to make it work, you'll have to initialize it after the $.post, like so:

jQuery(document).ready(function ($) {
    function facebox_init() {
        $('a[rel*=facebox]').facebox({
            loadingImage: 'imgs/loading.gif',
            closeImage: 'imgs/closelabel.png'
        });
    }
});

function lecFunc(year) {
    var name = year + '_lec';
    $.post('php/scripts/lecClickScript.php', { matYear: year, matType: name }, function (data) {
        document.getElementById("lecs_tbody").innerHTML = data;
        document.getElementById("lecs_boxbody").style.display = 'block';
        document.getElementById("qus_boxbody").style.display = 'none';

        facebox_init();
    });
}