title: jQuery: cropit to remove image data and replace with a new one?
body: <p>I'm using the <code>cropit.js</code> jquery plugin to crop images in the browser.
  The plugin website is <a href="http://scottcheng.github.io/cropit/" rel="nofollow">here</a>.</p>
  
  <p>The issue that I have is that I am loading the images dynamically based on the image that's <em>clicked</em> on.</p>
  
  <p>The first image loads fine and everything works perfectly. However, if I click on the second image or any other image, it doesn't load onto the cropper area and the First image always gets stuck in the cropping area for some reason.</p>
  
  <p>I've tried to create a Fiddle to explain this but I think due to some security reasons, the external images wont load using cropit.js. Also, jsfiddle wont allow http: url's so I couldn't get the fiddle up and running. but the structure of my code is this: <a href="https://jsfiddle.net/hhshgeed/" rel="nofollow">https://jsfiddle.net/hhshgeed/</a></p>
  
  <p>You just have to run this locally in a simple html file with all the images available in the same folder as your html file. <em>Also, you need to include the cropit.js as well.</em></p>
  
  <p>This is my entire code:</p>
  
  <pre><code>$('.position').live('click', function(){
      var img = $(this).attr('src');
      alert(img);
  
      // Re-enables the cropper.
      // Does the opposite to `disable` method.
      $(function() {
          $('.image-editor').cropit({
              imageBackground: true,
              imageBackgroundBorderWidth: 20,
              imageState: {
                  src: ''+img+'',
              }
           });
  
           $('.rotate-cw').click(function() {
               $('.image-editor').cropit('rotateCW');
           });
  
           $('.rotate-ccw').click(function() {
                $('.image-editor').cropit('rotateCCW');
           });
  
           $('.export').click(function() {
               var imageData = $('.image-editor').cropit('export', {
                   type: 'image/webp',
                   quality: .9,
                   originalSize: true
                });
           });
       });
  });
  </code></pre>
  
  <p>As you can see in my code, I'm trying to use the variable <code>img</code> in the cropit <code>src</code> function. This works but only once.</p>
  
  <pre><code>imageState: {
      src: ''+img+'',
  }
  </code></pre>
  
  <p>Could someone please advise on this issue as I'm literally banging my head against the wall.</p>
  
  <p>Thanks in advance.</p>