Триггерное событие не происходит в Firefox и Safari

У меня возникла проблема, когда мое триггерное событие не происходит в 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(); перед отправкой формы! Это работает в хроме, но не в фаерфоксе и сафари - что здесь не так?


person Troels Johannesen    schedule 16.11.2015    source источник
comment
Вы пробовали только jQuery("#buttonSubmit").click();? или jQuery("form[name='addpro']").submit();?   -  person Twisty    schedule 16.11.2015
comment
Дает тот же результат, работает в Chrome, но не в Firefox. Сайт находится здесь — добавьте в корзину, называется Læg i kurven — внизу справа: flex-skilte.dk/skiltedesigner   -  person Troels Johannesen    schedule 16.11.2015
comment
Какую версию JQuery вы используете? Есть ли для этого элементы PHP, которые не показаны?   -  person Twisty    schedule 16.11.2015
comment
jquery.js?ver=1.11.3 - Существует функция php, которая запускается после этого, - вызывается этим триггером. Else — это значение, установленное по умолчанию, как вы можете увидеть здесь или с помощью jQuery.   -  person Troels Johannesen    schedule 16.11.2015
comment
Протестировано в FireFox 42: jsfiddle.net/Twisty/673q4dmm работает.   -  person Twisty    schedule 16.11.2015
comment
Протестировано в Safari 5.1.7 (для Windows) с тем же кодом, все работает.   -  person Twisty    schedule 16.11.2015
comment
Давайте продолжим это обсуждение в чате.   -  person Troels Johannesen    schedule 16.11.2015


Ответы (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 и, кажется, работает, но отправляет форму дважды. Возможно, это связано с тем, как работает этот плагин. Мне еще предстоит найти работу вокруг.

person Twisty    schedule 16.11.2015