jQuery function not working on dynamically loaded content

Question

I have an index.html page which dynamically loads content from other html files. It works fine with the following code in the index.html page

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>

The above works as expected but for the test.html page. This page contains some content along with some links to other pages which I would like to show dynamically as well. For example if this page contains a link with class "loadfullcont", I want it to show like as if I am clicking this link from index.html. Here is what is there in the test.html page without the content

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>

I am new to jquery and I am stuck with this for days. Can someone explain to me how to correct this issue?

EDIT

After referring to other questions I have found out that I need to use delegation and updated my jquery code as follows

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

});

Now when I click the "Replace Content Link" it opens in a new page. Not what I really wanted. Am I missing something?

Final Edit

Sorry, It was just a typo in the test.html page. Now it works as expected.

jQuery function not working on dynamically loaded content

0 Answers0