how do you detect click events from .get() AJAX contents?

how do you detect click events from .get() AJAX contents?

I've tried searching for this under the forums — and maybe it's because I just am using the wrong terms — but I cannot find any answers around this.  Here's the skinny:

  1. I've got a listener for click events from links in DIV #1 in the loaded document, and when a user clicks on one of those links, it passes a value to a .get() function and runs a simple AJAX call and dumps the data/html results into DIV #2.


  2. After that click event, DIV #2 has a bunch of links in it, and I'm trying to traverse that dynamically assembled list and perform another .get() function based upon whatever link they click in DIV #2.


  3. Based on the parameter passed from the link in the dynamically assembled DIV #2 box, it would run the .get() function and fill DIV #3 with the data/html results from that second AJAX call.
The problem is that I can't seem to detect any sort of click event from the contents of DIV #2 aside from clicking on DIV #2 itself.  I've tried the usual .children() to try and traverse down to where the inserted links would be, but that's not working (e.g.:  $("#div2").children("a").click();  ).  I've also tried .find(), filter() and .has() but it doesn't respond, as if there was nothing there.

Here's the code I'm working with:

  1. <div id="album_row">
  2. <a href="#" rel="1">Album 1</a>
  3. <a href="#" rel="2'>Album 2</a>
  4. </div>
  5. <div id="song_list"></div>
  6. <div id="song_player"></div>

  8. $(document).ready( function() {   
  9.     $("#album_row").children("a").click(function(event) {
  10.         $("#song_list").html('loading...');
  11.         var albumid = $(this).attr("rel");
  12.         var url = "getsongs.php?album=" + albumid;       
  13.         $.get(url, function(data) {
  14.             $("#song_list").html(data);
  15.         }, "html");
  16.     });   
  17.     $("#song_list").filter("#tracklisting").children("a").click(function(event) {
  18.        alert($(this).attr("rel"));    // this is returning NOTHING O.o      
  19.       // this is where I'd like to perform the second AJAX call but I can't detect
  20.       // the clicks in #song_list  
  21.     });
  22. });
I have a feeling it's something simple that I'm missing here; but I've no clue what I'm doing wrong.  It seems that you should be able to traverse the DOM, even when you're essentially building it dynamically based upon a user's selection or an event within the DOM.

Any ideas on what I should be using to use to detect click() events from dynamically assembled elements?  I know exactly what DIV they'll be sent to, I just can't seem to traverse anything with them when I'm dynamically inserting HTML into them.