기능이 작동하는지 어떻게 감지합니까?

Question

http://jsfiddle.net/RTrce/

클릭 버튼 한 후 템플릿도 preview_image, 양식의 변화를 감지하고 이미지를 업로드 후크합니다 추가 할 수 있습니다.

템플릿을 n 번 추가하면 업로드 할 때 동일한 이미지를 n 번 업로드하면 문제가 있습니다. 어떻게 해결할 수 있습니까?

var add_image = function() { 
$('.row-gallery-button .add-image').on('click', 'input', function(event) { 

    // add template 
    var image_list_template = $('#image-list-template').html(); 
    $(image_list_template).clone().appendTo('.row-gallery-file-list-container'); 

    // preview image 
    preview_image(); 
    }); 
} 
add_image(); 


var preview_image = function() { 
$('.image-list').on('change', '.browseimage', function(e) { 

    var this_form = $(this).closest('form'), 
     this_form_data = new FormData(this_form[0]), 
     that = $(this); 

    // $.ajax({ 
    // url: public_path+'/article/preview_image', 
    // type: 'POST', 
    // data: this_form_data, 
    // processData: false, 
    // contentType: false, 
    // }) 
    // .done(function(response) { 
    // that.closest('.image-list').find('.preview').empty().append(response); 

    // that.hide(); 
    // }); 
    console.log('append'); 
    }); 
    } 

Answer 1

이것은 이벤트 등록을 함수 내에서 랩핑하고 호출하기 때문입니다. 간단히 그 당신을 위해 작동하고, 당신이 명시 적으로 호출 할 필요는 없습니다

$(function() { // DOM ready 
    $('.image-list').on('change', '.browseimage', function(e) {   
     var this_form = $(this).closest('form'), 
      this_form_data = new FormData(this_form[0]), 
      that = $(this); 

     // $.ajax({ 
     // url: public_path+'/article/preview_image', 
     // type: 'POST', 
     // data: this_form_data, 
     // processData: false, 
     // contentType: false, 
     // }) 
     // .done(function(response) { 
     // that.closest('.image-list').find('.preview').empty().append(response); 

     // that.hide(); 
     // }); 
     console.log('append'); 
     }); 
    } 
}); 

및

// preview image 
// preview_image(); 

을 풀기