html2canvas调用导致jQuery单击需要两次单击才能使函数工作

我已经阅读了所有问题，但没有成功。
我试过

trigger（）

，

unbind（'click'）

，

on（'click'，function（））

，

live（'click'）

，等等

我的问题是，我必须单击两次save按钮来验证数据并将其提交到数据库，然后返回一条

'success'

或

'fail

'消息以显示错误消息

JQUERY

$('.save').click(function (event) {
    // GET CATEGORIA
    var category_change = 0;
    if (!$('#new_category').val()) {
        category = $('#categoria_id').val();
    } else {
        category = $('#new_category').val();
        category_change = 1;
    }

    // GET TITLE
    var title = $('input#title').val();

    // GET IMAGE
    var target = $('#parent');
    html2canvas(target, {
        onrendered: function (canvas) {
            image = canvas.toDataURL();
        }
    });

    // GET FORMATED CODE
    var array = ["n", "e", "s", "w"];
    var format = $('#parent').html();
    var strrep = '<div class="close">X</div>';
    var strrep2 = '<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>';

    var aux2 = 0;
    while (aux2 < 5) {
        $.each(array, function () {
            format = format.replace('<div class="ui-resizable-handle ui-resizable-' + this + '" style="z-index: 1000;"></div>', '');
        });
        format = format.replace(strrep, '');
        format = format.replace(strrep2, '');
        aux2++;
    }
    var code = '<div id="parent">' + format + '</div>';


    if (title != '' && $('.child').length != 0) {
        $('.db_result').html('<img src="images/loader.gif" />');
        $.post("db_prox.php", {
            category: category,
            title: title,
            image: image,
            code: code,
            category_change: category_change
        }, function (post_result) {
            alert('2');
            if (post_result == 'success') {
                $('.db_result').text('O template foi guardado com sucesso!');
                $('.continue').prop("disabled", false);
            } else {
                $('.db_result').text('Ocorreu um erro na gravação do template!');
            }
        });
    }

    // INSERIR NA BASE DE DADOS CLOSE
});

$（'.save'）。单击（函数（事件）{
//得到分类
var类别变化=0；
if（！$（“#新#类别”）.val（）{
category=$（'#categoria_id'）.val（）；
}否则{
类别=$（“#新类别”）.val（）；
类别变更=1；
}
//获得头衔
var title=$（'input#title'）.val（）；
//获取图像
var目标=$（'父'）；
html2canvas（目标{
onrendered：函数（画布）{
image=canvas.toDataURL（）；
}
});
//获取格式化代码
变量数组=[“n”、“e”、“s”、“w”]；
var format=$（'#parent'）.html（）；
var strrep='X'；
var strep2=''；
var aux2=0；
而（aux2<5）{
$.each（数组、函数（）{
格式=格式。替换（“”，”）；
});
format=format.replace（strrep“”）；
format=format.replace（strep2'，）；
aux2++；
}
var代码=“”+格式+“”；
如果（标题！=''&$（'.child'）。长度！=0）{
$（'.db_result'）.html（''）；
$.post（“db_prox.php”{
类别:类别,，
标题:标题,，
图像：图像，
代码：代码，
类别变更：类别变更
}，函数（post_结果）{
警报（“2”）；
if（post_result==“success”）{
$（'.db_result'）.text（'O模板foi-guardado-com successo！'）；
$（'.continue'）.prop（“已禁用”，false）；
}否则{
$（'.db_result'）.text（'Ocorreu um erro na gravaço do template！'）；
}
});
}
//护墙板底座内墙
});

PHP db_prox.PHP

<?php
require_once 'includes/functions.php';

$categoria = $_POST['category'];
$title = $_POST['title'];
$image = $_POST['image'];
$code = $_POST['code'];
$nova_categoria = $_POST['category_change'];

if($nova_categoria == 1){

    $result = get_cat_last_created();
    $cat_id = mysqli_fetch_assoc($result);
    $aux_id = $cat_id['categoria_id'] + 1;
    $query = "INSERT INTO categorias (categoria_id, name) VALUES ('$aux_id', '$categoria')";
    if(mysqli_query($connection, $query)) {
        $query2 = "INSERT INTO templates (categoria_id, title, image, code) VALUES ('$aux_id', '$title', '$image', '$code')";

        if(mysqli_query($connection, $query2)) {
            echo "success";
        }
        else {
            echo "fail";
        }
    }
}else{
    $query = "INSERT INTO templates (categoria_id, title, image, code) VALUES ('$categoria', '$title', '$image', '$code')";
    if(mysqli_query($connection, $query)) {
        echo "success";
    }
    else {
        echo "fail";
    }
}
mysqli_close($connection);
?>

---

中的
onrendered
函数是异步的

 html2canvas(target, {
    onrendered: function (canvas) {
        image = canvas.toDataURL();
    }
});

这意味着，在这之后同步运行的任何代码都没有指定
image
变量

在
onrendered
函数中移动ajax帖子将使其在创建图像后发送请求，即：

 html2canvas(target, {
    onrendered: function (canvas) {
        image = canvas.toDataURL();
        $.post("db_prox.php", {
          category: category,
          title: title,
          image: image,
          code: code,
          category_change: category_change
        }, function (post_result) {
          alert('2');
          if (post_result == 'success') {
            $('.db_result').text('O template foi guardado com sucesso!');
            $('.continue').prop("disabled", false);
          } else {
            $('.db_result').text('Ocorreu um erro na gravação do template!');
          }
        });
    }
});

你为什么不试着把代码简化成一个简单的例子，看看会发生什么？是的，如果我这样做，它会让我点击一次来执行。但我需要在单击“保存”按钮后执行所有的GET操作。如果您担心代码的安全性，sql注入几乎是可以预测的。如何避免在上述代码中使用sql注入？@circle73这需要时间，但最终会比等待其他人弄明白要快：将代码缩减到可用的程度，然后把剩下的一步一步加回去。嗨，Niklas！你这里有一个很棒的插件。我正要和你联系。这个解决方案对上述问题非常有效。但现在我有另一个问题。我不知道这个插件在图像jpeg中输出的大小是否有限制，但现在当我运行它时，所有的图像都会渲染到一半的div#parent。有没有办法扩展大小限制，使图像全部输出？@circle73默认情况下，
toDataURL
返回png图像。div#parent是否设置了溢出滚动？我正在使用此方法以jpeg
image=canvas.toDataURL（“image/jpeg”）的形式返回图像这是
#parent
：
#parent{width:800px；height:600px；position:absolute；top:0；left:0；border:solid 2px gray；padding:0；overflow:scroll；}