動的アップロード画像プレビュー

Question

私は画像アップロードプレビュー画像（http://www.jqueryscript.net/demo/Image-Upload-Preview-Plugin-With-jQuery-Bootstrap-img-upload/）を作成するためにスクリプトを使用しています。 本当にうまくいっていますが、私のフォームにはいくつかの問題があります。私は、入力機能を追加する必要があります。私の場合、ユーザーは複数のフィールドを動的に追加できます。問題はありません。新しい入力フィールドを作成するために追加ボタンをクリックした場合にのみ問題が発生します。いくつかのイベントが発生し、画像を挿入した後にのみ表示されるボタンの表示を開始します。上記の私は入力フィールドを動的にコードを残す。

例： https://jsbin.com/bozeyuface/edit

のJs：

//inputs 
var max_fields = 10; //maximum input boxes allowed 
var wrapper = $(".input_fields_wrap"); //Fields wrapper 
var add_button = $(".add_field_button"); //Add button ID 

var x = 1; //initlal text box count 
$(add_button).click(function(e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 

     $(wrapper).append('<div class="col-md-4"><div class="form-group"><input class="form-control" type="text" placeholder="Brand" name="brand[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="title" name="title[]"></div><div class="form-group"><input class="form-control" type="text" placeholder="url" name="url[]"></div><div class="form-group"><div class="imageupload panel panel-default"><div class="file-tab panel-body"><label class="btn btn-default btn-file"><span>Browse</span><input type="file" name="file"></label><button type="button" class="btn btn-default">Remove</button></div><div class="url-tab panel-body"><div class="input-group"><input type="text" class="form-control hasclear" placeholder="Image URL"><div class="input-group-btn"><button type="button" class="btn btn-default">Submit</button></div></div><button type="button" class="btn btn-default">Remove</button><input type="hidden" name="image-url[]"></div></div></div><a href="#" class="remove_field btn btn-danger btn-sm"><i class="fa fa-trash"></i> Remove</a></div>'); 
    } 
}); 

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
}) 

Answer 1

ただ、以下のコードを追加して、カウンタを使用してdiv要素に一意のクラスを追加します。それがあなたのために働く場合は、答えを受け入れる