Jcrop внутри функции, не выполненной во второй раз

При нажатии на ссылку редактирования я показываю окно, в котором я хочу использовать Jcrop для редактирования. После того, как я нажму ссылку «Редактировать A», она работает нормально. Но когда я нажимаю «Редактировать B», он продолжает показывать первое изображение. Когда я сначала нажимаю «Редактировать B», происходит обратное.

Я не знаю почему, но кажется, что моя функция Jcrop дает сбой во второй раз.

Ссылки на изображения, которые можно редактировать:

<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');
}   

Но после выполнения функции jCrop ссылки на изображения в div jcrop-holder также не обновляются. Итак, я предполагаю, что моя функция .Jcrop не принимает новое значение атрибута src элемента #targetimage.

<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>