Remove jQuery generated content with on()
<p>I have some markup like this:</p>

<pre><code>&lt;div class="large-image"&gt;
    &lt;img src="foo.jpg" class="original-size"&gt; &lt;--This persists
    &lt;img src="foo-fullsize.jpg" class="zoomed"&gt; &lt;--injected by jQuery zoom plugin
    &lt;img src="bar-fullsize.jpg" class="zoomed"&gt; &lt;--also injected
&lt;/div&gt;

&lt;div class="thumbnails"&gt;
    &lt;a href="foo-fullsize.jpg" class="thumb"&gt;&lt;img src="foo-thumb.jpg"&gt;&lt;/a&gt;
    &lt;a href="bar-fullsize.jpg" class="thumb"&gt;&lt;img src="bar-thumb.jpg"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I have some code like:</p>

<pre><code>$(window).load(function() {
   $('a.thumb').click(function(){
      $('#main-image').zoom({url: this.href}); // jQuery zoom
   });
});
</code></pre>

<p>Every time I click a thumb link, the zoom plugin injects a new image into the <code>&lt;div class="large-image"&gt;</code> container. I would like to be able to remove all existing images with class zoomed before a new one is created. I know I need to use on() to accomplish this, but I can't seem to get it to work with the generated images.</p>
