Q:

Dynamically adding content to HTML page using JavaScript (and JQuery) - how to access new content? 

I have a HTML file that contains only the basic elements (html, head, body, ...) and I want to fill it up with content stored in an external file ("content.html") in my case, using JavaScript (and JQuery).  I have accomplished that with function $.get(), but I don't know, how to access the information I got with this function. 
For example, I want to throw an alert if a link is clicked.  My code looks like this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

       $.get("content.html", addContent);   // calls addContent

       function addContent(data)            // fills <div id='content'> with content.html
       {
          $("#content").html(data);
          alert('Load was performed.'); 
       }

       $("a").click(function(event){ // !!! if any link is clicked, throw an alert 
         alert("Link clicked");
         event.preventDefault();
       });

     });
    </script>

</head>

<body>
  <div id="content">
  <! --CONTENT OF content.html WILL BE INSERTED HERE-->
  </div>
</body>
</html>

This is how content.html looks like:
<h1>Band Creator Home</h1>
    <p>Currently following apps are available:</p>
    <ul>
        <li><a href="/bands/">Bands</a></li>
        <li><a href="/instruments/">Instruments</a></li>
        <li><a href="/musicians/">Musicians</a></li>
        <span></span>
    </ul>

Since there is no  element in the original HTML, alert "Link clicked" is never thrown.  How can I access these elements collected by $.get() ? 

A:

You are looking for .live() bindings.  Do it like:
$("a").live('click', function(event){ // !!! if any link is clicked, throw an alert 
     alert("Link clicked");
     return false;
});

The event method .preventDefault() does not work within .live(), return false instead.  Since .live() adds an even listener to the document.body, it's always a good idea to use .delegate() if possible.  You can tell .delegate the closest parent node which all elements share you need to watch.  In your instance:
$('ul').delegate('a', 'click', function() {
     alert('Link Clicked');
     return false;
});

Ref.:  .live(), .delegate()

A:

AJAX is asynchronous. 
The server only sends a reply some time after the get method finishes. 
Therefore, you end up adding the click handler before addContent is called, before the new elements exist. 
If you add the handler inside addContent, it will work fine, since the new element will have already been added. 
Alternatively, you can use jQuery's live method to add a handler to all elements that match the selector, no matter when they were created.