Триггерное событие не происходит в 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 (); перед отправкой формы! Это работает в Chrome, но не в Firefox и Safari — что здесь не так?
Решение
Первоначально я не мог повторить проблему через 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 и, кажется, работает, но отправляет форму дважды. Это может быть проблема с тем, как работает этот плагин. Я еще не нашел работу вокруг.
Другие решения
Других решений пока нет …