Question

我有一个index.html页面，可动态加载其他html文件中的内容。它可以在index.html页面中使用以下代码正常工作

的index.html

//javascript
$(function(){
jQuery(function ($) {
var $targetDiv = $("#targetContent"),
    $fullFrame = $("#targetFrameFull"),
    $close = $targetDiv.find("#contentClose");


$(".loadfullcont").on("click", function (e) {
        e.preventDefault();
        $fullFrame.hide();
        $('#loader').show(); // loading animation
        $fullFrame.load(this.href, function () {
            $('#loader').hide();
            $fullFrame.show();
        });
        $fullFrame.parent($targetDiv).slideDown(500, function () {  
            $close.fadeIn(200).on("click", function () {
                $(this).fadeOut(100, function () {
                    $targetDiv.slideUp(500);
                });                
            });
        });
    });
});
});

HTML

<div id="nav">
    <ul>
        <li><a class="loadfullcont" href="content/overview.html">Overview</a></li>
        <li><a class="loadfullcont" href="content/aboutus.html">About Us</a></li>
        <li><a class="loadfullcont" href="content/test.html">Test Page</a></li>
    </ul>
</div>
<div id="targetContent"> <a id="contentClose" href="javascript:;">Close</a>
    <div id="targetFrameFull"></div>
    <div id="loader"><img src="images/loader.GIF" alt="Loading"/></div>
</div>

以上工作符合预期但适用于test.html页面。此页面包含一些内容以及一些我想动态显示的其他页面的链接。例如，如果此页面包含类“loadfullcont”的链接，我希望它显示为好像我从index.html单击此链接。以下是没有内容的test.html页面中的内容

的test.html

<!DOCTYPE html>
<html>
<head>
    <title>Park Residencies</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="css/trans.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <a class="loadfullcont" href="content/someotherpage.html">Click to Replace Content</a>
</body>
</html>

我是jquery的新手，我坚持了好几天。有人可以向我解释如何纠正这个问题吗？

修改

在提到其他问题之后，我发现我需要使用委托并更新我的jquery代码，如下所示

$(document.body).on("click", ".loadfullcont", function (e) {
        e.preventDefault();
        // same actions as in the previous code

});

现在当我点击“替换内容链接”时，它会在新页面中打开。不是我真正想要的。我错过了什么吗？

最终修改

抱歉，这只是test.html页面中的一个拼写错误。现在它按预期工作。

jQuery函数不能处理动态加载的内容

0 个答案: