事件觸發

以下HTML使用Jasny Bootstrap mod fileinput.js 事件觸發

<div class="profile_image"> 
      <form accept-charset="UTF-8" action="https://stackoverflow.com/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個警報

哪有我解決這個問題？

來源

2014-02-13 Nick Ginanto

你試過用** $（ 'form.edit_user'）提交。（）; **？ –

我遇到了同樣的問題。你有沒有設法找出是什麼原因造成的？ – mmalmeida

請注意，這隻會在將bootstrap-spinner.js文件添加到頁面（） – mmalmeida

我相信問題與fileinput的版本有關。這裏是一個jsfiddle使用文件輸入版本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> &nbsp; <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none"> </a> 
    </div> 
</div>

來源

2014-08-21 11:13:16 mmalmeida

也注意到這個問題得到報告和解決在v 3.1.1 https://github.com/jasny/bootstrap/issues/182 –

您可以使用「提交」事件提交表單，而不是觸發「點擊」。

$(".fileinput").on("change.bs.fileinput", function(){ 
     $("#edit_user_5").submit(); 
     return false; 
}

來源

2014-02-13 14:19:44 cardeol

仍然沒有幫助，看我編輯 –

回答

相關問題