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版本然后我读了这个qustion 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

我不确定this处理函数中你期望$.post哪个元素，但它不会像那样工作，因为它会引用不同的范围。您需要在附加到页面的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();
    });
}

facebox在$ .post之后无法正常工作

2 个答案: