title: How to bind a click event on a recently added <a> tag in jquery
body: <p>I have 6 links on a page to an mp3.</p>
  
  <p>The plugin I installed replaces those links with a swf and plays that mp3 inline.</p>
  
  <p>The problem I <em>had</em> was that it was possible to activate all 6 links and have all audio playing at once. I <em>solved</em> that problem (I feel in a clumsy novice way though) by catching the <code>&lt;a&gt;</code> tag before it was replaced with the embed tag and then putting it back when another one was clicked.</p>
  
  <p><strong>However, this is my problem now</strong>: the <code>&lt;a&gt;</code> tag I put back looses it's onClick event (i think that's what is happening) and so, if clicked a second time, fails to switch like the first time.</p>
  
  <pre><code>$(".storyplayer a").bind("click", function() {
  
          // replace the &lt;a&gt; tag from the previous media player installation
          if (previousplayerlocation != null) {$("#" + previousplayerlocation + " .storyplayer").html(graboldcode);}      
  
          // now remember this installation's &lt;a&gt; tag before it's replaced
          graboldcode = $(this).parent().html();
          // remember where I grabbed this &lt;a&gt; tag from
          previousplayerlocation = $(this).parents("div.storylisting").attr("id");
  
          // replaces the &lt;a&gt; tag with the media player.
          $(this).media({width: 190,height: 30});
          return false;
      });
  </code></pre>
  
  <p>Is a way to re-assign the click event to the <code>if</code> statement?</p>