title: Jcrop button not working in safari or chrome
body: <p>I'm currently using Jcrop and we are experiencing issues with Chrome and Safari.</p>
  
  <p>we can upload an image and the Jcrop binds to the image so i can drag the dimentions and using the inspect element i can confirm that the dimentions are correctly updated into the fields. However when i click the crop image button the event doesn't fire on chrome or safari. I have looked for issues but am unable to find it. As i have an ajax upload for the photo and loading the photo into colorbox i have had to use the following code:</p>
  
  <p>The Cropping Section</p>
  
  <pre><code>$(document).on("submit", "#resize", function (e) {
      e.preventDefault();
      $(".loadgif").css("display", "none");
      var t = $("#resizeimage").val();
      var n = $("#w").val();
      var r = $("#h").val();
      var i = $("#x").val();
      var s = $("#y").val();
      $.ajax({
          type: "POST",
          url: "scripts/resizer.php",
          data: {
              image: t,
              w: n,
              h: r,
              x: i,
              y: s
          }
      }).done(function (e) {
          $("#images1").val(e)
      }).complete(function (e) {
          var t = $(".myform");
          t.reset();
      });
      $("#cropimage").colorbox.close()
  });
  </code></pre>
  
  <p>The Upload Section: </p>
  
  <pre><code>$(document).ready(function () {
  
  $("#formsubmit").click(function (e) {
          $(".loadgif").css("display", "block");
          e.preventDefault();
          var t = $('&lt;iframe name="postiframe" id="postiframe" style="display:none;"/&gt;');
          $("body").append(t);
          var n = $(".myform");
          n.attr("action", "scripts/uploader.php");
          n.attr("method", "post");
          n.attr("enctype", "multipart/form-data");
          n.attr("encoding", "multipart/form-data");
          n.attr("target", "postiframe");
          n.attr("file", $("#userfile").val());
          n.submit();
          $("#postiframe").load(function () {
              function e(e) {
                  $("#x").val(e.x);
                  $("#y").val(e.y);
                  $("#w").val(e.w);
                  $("#h").val(e.h)
              }
  
              function t() {
                  if (parseInt($("#w").val())) return true;
                  alert("Please select a crop region then press submit.");
                  return false
              }
              iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
              $("#cropimage").html(iframeContents);
              $("#postiframe").remove();
              $.colorbox({
                  width: "60%",
                  inline: true,
                  href: "#cropimage"
              });
              $(document).find("#postiframe").remove();
              $(function () {
                  $("#cropbox").Jcrop({
                      aspectRatio: 1,
                      onSelect: e
                  })
              });
          })
      });
  });
  </code></pre>
  
  <p>as the website does use a form that is for the product submission however i also had to use a form that submits for the jcrop so it will modify the form to work for the upload then after it will reset the form but i can't even get that far. As i said this works fine in I.E and in Firefox.</p>
  
  <p>Any help would be appreciated.</p>