Jcrop within a function not executed a second time

Question

On click of an edit link I show a window in which I want to use Jcrop for editing. After I click the 'Edit A' link it works fine. But when I click 'Edit B', it keeps showing the first image. When I click 'Edit B' first' the opposite happens.

I don't know why, but it seems as if my Jcrop function fails the second time.

Links to images that can be edited:

<a id="btnEditThumb" href="#" onclick="return CropThumb(6544,'879_146_iStock-000002025938Small.jpg');">Edit A</a>
<a id="btnSetThumb" href="#" onclick="return CropThumb(6543,'879_497_iStock-000014805179Small.jpg');">Edit B</a>
<img src="" id="targetimage" alt="" />
<input type="hidden" id="imgid" />
<input type="hidden" id="workingimage" />


function jCrop() {
    var jcrop_api,boundx,boundy,
   xsize = 1;
    ysize = 1;

    console.log($('#targetimage').attr('src'));
    //the target image element is updated correctly, however, it seems as if the .Jcrop function is not applied again.

    $('#targetimage').Jcrop({
        onChange: storeCoords,
        onSelect: storeCoords,
        minSize: [190, 190],
        maxSize: [$('#targetimage').width(), $('#targetimage').height()],
        aspectRatio: xsize / ysize
    }, function () {
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
        jcrop_api.setSelect([0, 0, 190, 190]);

    });
}


function CropThumb(imgId, filename) {

    $('#targetimage').attr('src', 'http://www.mydomain.com/images/original/' + filename);
    $('#imgid').val(imgId);
    $('#workingimage').val(filename);
    jCrop();

    //show edit lightbox
    centerPopup('cropwindow', 'backgroundPopup');
    loadPopup('cropwindow', 'backgroundPopup');
}   

But after the jCrop function is executed, the image references in the jcrop-holder div are not updated as well. So I'm assuming my .Jcrop function is not taking in the new src attribute value of the #targetimage element.

<div class="jcrop-holder" style="width: 850px; height: 565px; position: relative; background-color: rgb(0, 0, 0);">
  <div style="position: absolute; z-index: 600; width: 190px; height: 190px; top: 0px; left: 0px;">
    <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
      <img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 850px; height: 565px;">
      <div class="jcrop-hline" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-vline right" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-vline" style="position: absolute; opacity: 0.4;">
      </div>
      <div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;">
      </div>
    </div>
    <div style="width: 100%; height: 100%; z-index: 320; display: block;">
      <div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;">
      </div>
      <div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;">
      </div>
      <div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;">
      </div>
      <div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;">
      </div>
      <div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;">
      </div>
      <div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;">
      </div>
      <div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;">
      </div>
      <div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;">
      </div>
      <div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;">
      </div>
      <div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;">
      </div>
      <div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;">
      </div>
      <div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;">
      </div>
    </div>
  </div>
  <div class="jcrop-tracker" style="width: 854px; height: 569px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;">
  </div>
  <input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;">
  <img src="http://www.mydomain.com/images/original/879_497_iStock-000014805179Small.jpg" alt="" style="display: block; visibility: visible; width: 850px; height: 565px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.6;">
</div>  

Answer 1

Jcrop works only for one image, when the element is created. The image that you see is not changed because the image element displayed is created by Jcrop, and yours is hidden (display:none). The most simple solution is re-create your image element every time the image is changed.

In the HTML, replace the img tag with a containing div for the image:

<div id="targetimagewrapper"></div>

And the CropThumb function:

function CropThumb(imgId, filename) {
  var image = $('<img src="http://www.mydomain.com/images/original/' + filename + '" id="targetimage" alt="" />');

  image.load(function(){
    $('#imgid').val(imgId);
    $('#workingimage').val(filename);
    jCrop();

    //show edit lightbox
    centerPopup('cropwindow', 'backgroundPopup');
    loadPopup('cropwindow', 'backgroundPopup');
  };

  $('#targetimagewrapper').empty().append(image);
}