변경 이벤트가 한 번이 아닌 두 번 실행됩니다.

Question

이 html5 업 로더 플러그인에서 작업하고 있지만 이해할 수없는 버그가 있습니다.

jsfiddle link

이 플러그인의 아이디어는 클릭 만 대상 버튼에 기능의 그룹을 연결하는 것입니다. 나는 '버튼을-1'에 클릭 이벤트를 클릭하면 on change event이 일어나는 경우

는 단, '버튼을-2' 클릭 이벤트가 동시에 트리거되고있다. 나는 change 이벤트가 두 번 트리거되어야한다고 생각한다.

업로드 버튼을 클릭하면 무슨 뜻인지 알 수 있습니다.

이 플러그인에서 어떤 문제가 발생하는지 알고 싶습니다.

(function($){ 

    // Attach this new method to jQuery 
    $.fn.extend({ 

     // This is where you write your plugin's name 
     upload_file_html5: function(options) { 

      // Set the default values, use comma to separate the settings, example: 
      var defaults = { 
       objectSuperparent: '.media' 
      } 

      var options = $.extend(defaults, options); 
      var o = options; 

      var $cm = this.click(function(e){ 

       // <a> button is the object in this case. 
       var object = $(this); 

       // Get other info from the element belong to this object group. 
       var object_href = object.attr('href'); 
       var object_parent = object.parent(); 
       alert($cm.selector); 

       // Trigger the click event on the element. 
       // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them. 
       //$('input[type=file]').trigger('click'); // or: 
       $(".upload-file",object_parent).click(); 

       return false; 

      }); 

      // Trigger ajax post when ever the file is changed by the user. 
      var $cm_2 = $(".upload-file").change(function(){ 

       // <input> is the object in this case. 
       var object = $(this); 

       var object_form = object.parent(); 
       var object_superparent = object.parents(o.objectSuperparent); 
       var path_config = $($cm.selector,object_superparent).attr('href'); 
       var path_post = object_form.attr('action'); 

       alert($cm.selector); 
       //alert(path_config); 

       .... 
       .... 

      }); 

     } 
    }); 

})(jQuery); 

Answer 1

는 코드의 내 변형을 확인하십시오 http://jsfiddle.net/es8Vh/3/ 기본 jQuery 플러그인 구조 :이 답변, dfsq에 대한

$.fn.pluginName = function() { 
    return this.each(function() { // <-- this is important 
     // code here 
    }); 
};