Question

点击按钮后，添加模板也会挂钩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();

如何检测功能是否有效？

1 个答案: