Bootstrap Fileinput Dinamik Olarak Ekleme

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

Bootstrap Fileinput Dinamik Olarak Ekleme

05/Ara/16 17:17

Kısayol

Şikayet

Özel Mesaj

manyaki

Kayıt Tarihi: 27/Temmuz/2005

$(function () {
    var fileinput_html = '<div class="col-md-4"><div class="fileinput fileinput-new" data-provides="fileinput">';
    fileinput_html += '<div class="fileinput-new thumbnail" style="width: 333px; height: 241px;"><img src="assets/pages/img/menu/no-image.png" alt="" /> </div>';
    fileinput_html += '<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>';
    fileinput_html += '<div class="text-center"><span class="btn default btn-file"><span class="fileinput-new"> Görsel Seç </span>';
    fileinput_html += '<span class="fileinput-exists"> Değiştir </span><input type="file" name="..."> </span>';
    fileinput_html += '<a href="javascript:;" id="remove-image" class="btn red fileinput-exists" data-dismiss="fileinput"> Kaldır </a>';
    fileinput_html += '</div></div></div>';
    $(".fileinput").on("change.bs.fileinput", function() {
        alert();
        $('#tab1 > .form-group').append(fileinput_html);
    });

});

Yukardaki change.bs.fileinput sadece 1 defa tetikleniyor ve ikinciyi ekliyor. Ama ikinciyi koyduktan sonra tekrar çağrılmıyor.

"on" kullandım, bootstrap-fileinput' da kullanımı bu şekilde gösterilmiş ama çok eklemede böyle bir sıkıntı yaşadım.

Sorunun çözümünü biliyor musunuz?

Aşağıda da html gösterimi mevcuttur. Teşekkürler :)

<div class="tab-pane active" id="tab1">
                                            <h3 class="block">Menü Başlık Görselleri Yükleyin</h3>
                                            <div class="form-group">
                                                <div class="col-md-4">
                                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                                        <div class="fileinput-new thumbnail" style="width: 333px; height: 241px;">
                                                            <img src="assets/pages/img/menu/no-image.png" alt="" /> </div>
                                                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>
                                                        <div class="text-center">
                                                            <span class="btn default btn-file">
                                                                <span class="fileinput-new"> Görsel Seç </span>
                                                                <span class="fileinput-exists"> Değiştir </span>
                                                                <input type="file" name="..."> </span>
                                                            <a href="javascript:;" id="remove-image" class="btn red fileinput-exists" data-dismiss="fileinput"> Kaldır </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

since 2005 // tbt

Alıntı yap

05/Ara/16 18:34 Kısayol Şikayet Özel Mesaj

KuZeTaR

Kayıt Tarihi: 26/Aralık/2009

Kodu jsfiddle'a eklersen yardımcı olabilirim, bu şekilde hiç bişey anlaşılmıyo koddan

İşine yarayacaktır;

http://jsfiddle.net/Ankit47/nzjsf4ko/
KuZeTaR tarafından 05/Ara/16 18:50 tarihinde düzenlenmiştir

Alıntı yap

Toplam Hit: 914 Toplam Mesaj: 2
javascript bootstrap-fileinput çoklu ekleme

Cevapla