Jak podpiąć js do elementu pobranego za pomocą ajax'a Opcje

[NickOver]

Cześć.
Mam problem z podpinaniem js'ów do elementów pobieranych ajaxowo. Dobry przykład jest z dropzone.js
Pobieram część strony za pomocą ajax'a. Na końcu jest skrypt:

[HTML] pobierz, plaintext 
<script>
    Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        init: function() {
            var myDropzone = this;
 
            this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });
        }
 
    }
</script>
[HTML] pobierz, plaintext 

Próbowałem dać bez document ready ale też nie działało.

[NickOver]

Tak, wiem o tym. Mój problem polega na tym iż skrypt jest na końcu zawartości widoku który ajax mi zwraca, tj:

[HTML] pobierz, plaintext 
<div class="col-md-8">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Dodaj nowe zadanie</h5>
            <div class="ibox-tools">
 
            </div>
        </div>
        <div class="ibox-content">
            <form method="get" class="form-horizontal">
                <div class="form-group"><label class="col-sm-2 control-label">Nazwa: </label>
 
                    <div class="col-sm-10"><input type="text" class="form-control"></div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group"><label class="col-sm-2 control-label">Opis: </label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="10"></textarea>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <form id="my-awesome-dropzone" class="dropzone" action="#">
                    <div class="dropzone-previews"></div>
                    <button type="submit" class="btn btn-primary pull-right">xXx</button>
                </form>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-white" type="submit">Anuluj</button>
                        <button class="btn btn-primary" type="submit">Dodaj</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Komunikacja</h5>
            <div class="ibox-tools">
                <a class="collapse-link binded">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#">Config option 1</a>
                    </li>
                    <li><a href="#">Config option 2</a>
                    </li>
                </ul>
                <a class="close-link binded">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div>
                <div class="feed-activity-list">
                    <div class="feed-element">
                        <div class="media-body form-group">
                            <textarea class="form-control" placeholder="Wiadomość"></textarea>
                            <div class="pull-right">
                                <button type="button" class="btn btn-xs btn-primary" style="margin-top: 5px;">Wyślij wiadomość</button>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary btn-block m-t"><i class="fa fa-arrow-down"></i> Show More</button>
            </div>
        </div>
    </div>
</div>
<script>
    Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        init: function() {
            var myDropzone = this;
 
            this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });
        }
 
    }
</script>
[HTML] pobierz, plaintext 

Dodam że ten sam problem mam przy np: http://abpetkov.github.io/switchery/

Ten post edytował NickOver 17.11.2015, 15:18:34