Question

我遇到一个问题，我的触发事件在Firefox和Safari中没有发生，但在Chrome中有效。

此处调用触发器事件：

<script>    
function capture() {
    //console.log("function is running");
    jQuery('#square').html2canvas({
        onrendered: function (canvas) {
            var url;
            url = canvas.toDataURL("image/png");

            jQuery('#img_val').val(canvas.toDataURL("image/png"));

            jQuery("#buttonSubmit").trigger( "click" );
        }    
    });
}
</script>

它是从表单中的按钮触发的：

<form name="addpro" style="float:right;" method="post">
            <input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet">
            <input id="text2Input" name="text2Input" type="hidden" value="">
            <input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60">
            <input id="formInput" name="formInput" type="hidden" value="Firkant">
            <input id="farveInput" name="farveInput" type="hidden" value="Sort">
            <input id="typeInput" name="typeInput" type="hidden" value="Messing Standard">
            <input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer">
            <input id="fontInput" name="fontInput" type="hidden" value="Arial">
            <input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6">
            <input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6">
            <input id="priceInput" name="priceInput" type="hidden" value="470">
            <input type="hidden" name="img_val" id="img_val" value="tape.png" />
            <button onclick="capture();" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
            <input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />           
</form>

如你所见，我想运行函数capture（）;在提交表格之前！这适用于chrome但不适用于firefox和safari - 这里有什么问题？

Answer 1

我最初无法通过JSFiddle复制该问题。我不得不调整一些事情。使用以下 HTML ：

<div id="square">
</div>
<form name="addpro" style="float:right;" method="post">
    <input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet" />
    <input id="text2Input" name="text2Input" type="hidden" value="" />
    <input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60" />
    <input id="formInput" name="formInput" type="hidden" value="Firkant" />
    <input id="farveInput" name="farveInput" type="hidden" value="Sort" />
    <input id="typeInput" name="typeInput" type="hidden" value="Messing Standard" />
    <input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer" />
    <input id="fontInput" name="fontInput" type="hidden" value="Arial" />
    <input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6" />
    <input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6" />
    <input id="priceInput" name="priceInput" type="hidden" value="470" />
    <input type="hidden" name="img_val" id="img_val" value="tape.png" />
    <button id="buttonCart" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
    <input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />
</form>

我可以执行以下 JQuery ：

jQuery(document).ready(function(){
    jQuery("form[name='addpro']").submit(function(e){
        e.preventDefault();
        console.log("Form Submitted");
    });
    jQuery("#buttonCart").click(function(){
        html2canvas(jQuery("#square"),{
            onrendered: function(canvas){
                var imgVal = canvas.toDataURL("image/png");
                jQuery("#img_val").val(imgVal);
                console.log("Image rendered: " + imgVal);
            },
            logging: true
        });
        jQuery("#buttonSubmit").click();
    });
});

我的jsfiddle：http://jsfiddle.net/Twisty/673q4dmm/10/

这包括html2canvas v0.4.0，似乎确实有效，但两次提交表单。这可能是此插件工作方式的问题。我还没找到工作。

Firefox和Safari

1 个答案: