Jcrop button not working in safari or chrome

Question

I'm currently using Jcrop and we are experiencing issues with Chrome and Safari.

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:

The Cropping Section

$(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()
});

The Upload Section:

$(document).ready(function () {

$("#formsubmit").click(function (e) {
        $(".loadgif").css("display", "block");
        e.preventDefault();
        var t = $('<iframe name="postiframe" id="postiframe" style="display:none;"/>');
        $("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
                })
            });
        })
    });
});

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.

Any help would be appreciated.

Answer 1

So the solution is to replace

$(document).on("submit", "#resize", function (e) {

by

$(document).on("click", "#button_link", function (e) {