트리거 이벤트 클릭이 Jquery를 사용하여 여러 번 실행 중입니다.

Question

하나의 문제가 있습니다. Jquery에서 파일 업로드를 사용하는 동안 trigger('click')을 사용하고 있습니다. 아래 코드를 설명하고 있습니다.

$(document).on('click', '.browse', function(){ 
    var file = $(this).parent().parent().parent().find('.file'); 
    file.trigger('click'); 
    console.log('header'); 
}) 

내 html 부분은 아래에 있습니다.

<div class="form-group" style="margin-bottom:0px;"> 
<input type="file" name="logoimage" id="logoimage" ng-model= "form.logoimage" onchange="angular.element(this).scope().uploadedImage(this);" accept=".gif,.jpg,.jpeg,.png" class="file"> 
<div class="input-group col-xs-12"> 
<input type="text" class="form-control" placeholder="Upload Logo" name="setlogoimage" id="setlogoimage" ng-model="setlogoimage"> 
<span class="input-group-btn"> 
<button class="browse btn btn-primary" type="button">Upload File</button></span> 
    </div> 
</div> 

여기 파일 입력을 클릭하면 위의 기능이 3/2 회 실행되고 콘솔 메시지에서 알 수 있습니다. 한 번에 header을 3 번 클릭하면 디스크에서 파일을 3 번 선택하여 열기 버튼을 클릭해야합니다. 여기에서 한번에 한 번에 실행해야합니다. 당신의 클릭 이벤트가 여러 번 바인더 제본하기됨에 따라

Answer 1

당신은 당신이 다수의 클릭 이벤트를 바인딩 때문이다 off('click')

$('.browse').off('click').on('click', function(){ 
    var file = $(this).parent().parent().parent().find('.file'); 
    file.trigger('click'); 
    console.log('header'); 
});