$.post 后 facebox 不工作

Question

我正在使用 facebox 打开远程页面，我包括 jQuery、facebox.js 和 facebox.css 然后把它放在 document.ready 这样

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 版本然后我读了这个问题 Can-i-use-multiple-versions-of-jquery-on-the-same-page

然后按确切顺序添加此代码

    <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

我不确定您希望 $.post 处理程序函数中的 this 是哪个元素，但它不会像那样工作，因为它会引用不同的范围。您需要在附加到页面的 HTML 中查找 a 元素。试试这个：

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

您正在加载页面时初始化 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();
    });
}

$.post 后 facebox 不工作

facebox not working after $.post

jquery

facebox

.post