Loading text from file with Jquery into another dynamically-loaded page element

I am trying to load text with the .load() function into a div that has already been dynamically loaded with .load().

Here is the first div that is being loaded into:

<div class="container" id='content'>

</div>

Upon clicking this navigation menu item the content from an external html file gets loaded in:

<li><a href="#coding" id="coding-select">Coding</a>
</li>

With this snippet of Jquery:

$("#coding-select").click(function () {
    $('#content').load('content.html #coding');
});

So, the previous code all works great. However, it's when I try to load content into the "content.html" file after it has been loaded is where the problem is:

<div id="coding">
<h1>This is the coding section</h1>
<div  class="btn-group" id="codebuttons">
    <button type="button" class="btn btn-default" id="cpp">C++</button>
    <button type="button" class="btn btn-default" id="python">Python</button>
    <button type="button" class="btn btn-default" id="java">Java</button>
    <button type="button" class="btn btn-default" id="csharp">C#</button>
</div>
<div class="well well-large pre-scrollable" id="codebox">
    <code id="codecontent">

        <!-- code go here please... -->

    </code>
</div>
</div>

I'm trying to load in text from a text file when I click one of the buttons. I tried using the same Jquery method:

$('#cpp').click(function () {
    alert("working");
    $('#codecontent').load('code/sample.txt');
});

I don't even get the "working" alert when I click the cpp button. Keep in mind the first and second jquery snippets are located on the same file under the safeguard of the $(document).ready function.

Also, I tried doing this to a raw div instead of the tag to no avail.

Thanks in advance for your help.