[英]Event fires twice with Jasny Bootstrap
以下HTML使用Jasny Bootstrap mod fileinput.js
<div class="profile_image">
<form accept-charset="UTF-8" action="/users/5/update_image" class="edit_user" data-remote="true" enctype="multipart/form-data" id="edit_user_5" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="xx6ELZRrTR6XDzmujIPBsCkr8zbK19I/7CprOOTiblM="></div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; position: relative;">
<img alt="7bbfd77c 1102 4831 9ba8 246fb67460b3.2014 01 17" class="img-responsive" src="http://myweb.com/image.jpg">
<div class="choose_new">
</div>
</div>
<div class="btn-file">
<input id="user_avatar" name="user[avatar]" type="file">
</div>
</div>
<input name="commit" type="submit" value="Submit">
</form>
</div>
我想聽一下change.bs.fileinput事件,以便在選擇圖像后自動提交表單
運用
$(".fileinput").on("change.bs.fileinput", function(e) {
e.stopPropagation();
alert();
return false;
});
這樣做會產生2個警報
我怎樣才能解決這個問題?
我相信這個問題與fileinput的版本有關。 這是一個展示問題的jsfiddle ,使用fileinput版本3.0.0-p7(下面的代碼)
如果我們更新版本3.1.3( http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js ),那么問題將不會顯現本身。
JSFIDDLE SHOWCASE(使用JQuery 1.11.0和fileinput-3.0.0-p7添加的資源):
jQuery(document).ready(function() {
$('#file-upload').on('change.bs.fileinput', function(event) {
event.stopPropagation();
alert("yy");
console.log(event);
});
});
<div id="file-upload">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn default btn-file"> <span class="fileinput-new"> SELECT </span> <span class="fileinput-exists"> CHANGE</span> <input id="uploadID"
type="file" name="upload"> <input type="hidden" id="answerId" value="85009">
</span> <span class="fileinput-filename"> </span> <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none"> </a>
</div>
</div>
您可以使用“提交”事件提交表單,而不是觸發“點擊”。
$(".fileinput").on("change.bs.fileinput", function(){
$("#edit_user_5").submit();
return false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.