Facebox не работает после $.post

Question

Я использую Facebox, чтобы открыть удаленную страницу, я включилjQuery, facebox.js а также facebox.cssи положить его в документ. уже так

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';

        });

    }

Facebox больше не работает

РЕДАКТИРОВАТЬ:: Решено
На самом деле проблема заключалась в том, что я использовал две версии jQuery, а затем прочитал эту страницу. Можно ли использовать несколько версий jquery-на-той же странице

затем добавил этот код в точном порядке

    <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>

И в onClick.js файл

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

Вы инициализируете facebox, когда страница загружена. В этом случае плагин facebox будет применяться только к тем элементам, которые уже доступны в DOM. После того, как вы вставите контент с помощью AJAX, новый контент не будет инициализирован с помощью facebox. Для того, чтобы заставить его работать, вы должны будете инициализировать его после $.post, вот так:

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();
    });
}

Answer 2

Я не уверен, какой элемент вы ожидаете this в пределах $.post Должна быть функция-обработчик, но она не будет так работать, так как будет ссылаться на другую область видимости. Вам нужно искать a элементы в HTML, который вы добавили на страницу. Попробуй это:

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();
    });
}