Кнопка Jcrop не работает в Safari или Chrome

Question

В настоящее время я использую Jcrop, и у нас возникают проблемы с Chrome и Safari.

мы можем загрузить изображение, и Jcrop привязывается к изображению, чтобы я мог перетащить размеры и, используя элемент проверки, я могу подтвердить, что размеры правильно обновлены в полях. Однако, когда я нажимаю кнопку обрезки изображения, событие не запускается на Chrome или Safari. Я искал проблемы, но не могу найти их. Поскольку у меня есть ajax-загрузка для фотографии и загрузка фотографии в colorbox, мне пришлось использовать следующий код:

Секция посева

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

Раздел загрузки:

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

так как веб-сайт использует форму, предназначенную для представления продукта, однако мне также пришлось использовать форму, которая отправляет jcrop, поэтому он изменит форму, чтобы она работала для загрузки, а затем сбросит форму, но я даже не могу получить это далеко. Как я уже сказал, это прекрасно работает в IE и в Firefox.

Любая помощь будет оценена.

Answer 1

Таким образом, решение состоит в том, чтобы заменить

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

от

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