What could cause my jcrop script to not function in ie8 and ie10 while it does perform in ie9 and all other major browsers?

Question

I'm having a hard time debugging this since it is not returning any errors and it is functioning in ie9. I was wondering if there is some sort of common problem that causes script to function in ie9 but not in ie8 and ie10. I find it rather weird that this bug skips a version.

My code:

<script type="text/javascript">     

  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

    console.log('init',[xsize,ysize]);
    $('#picture').Jcrop({
      aspectRatio: <?php echo $_POST["aspectRatio"]; ?>,
      setSelect:   [ 0, 0, 300, 300 ],
      onSelect: updateCoords
    },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;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });


    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };

        function updateCoords(c)
  {
    $('#x').val(c.x / <?php echo $correctieCoordinates; ?>);
    $('#y').val(c.y / <?php echo $correctieCoordinates; ?>);
    $('#w').val(c.w / <?php echo $correctieCoordinates; ?>);
    $('#h').val(c.h / <?php echo $correctieCoordinates; ?>);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };      

  });   

</script>

The jcrop function does not get initialized in ie8 and ie10. But does work in ie9 and all major browsers.

Answer 1

changing

$('#picture').Jcrop({

to

jcrop_obj = jQuery.Jcrop('#picture', {

did the trick.