html2canvas 调用导致 jQuery click 需要两次单击才能使功能正常工作

Question

我已经阅读了所有相同问题但没有成功的问题。
我试过trigger()、unbind('click')、on('click', function())、live('click')等

我的问题是我必须点击两次保存按钮来验证并将数据提交到数据库并返回'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
});

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);
?>

Answer 1

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!');
          }
        });
    }
});