e.preventDefault() wird für modales Laden übersprungen

Question

Ich habe diesen Code gefunden, der Ajax zum Laden eines Modals verwendet. Er ist genau das, was ich brauche, um dynamische Modals aus meinen Datentabellen zu laden.Ich habe ein Tag-Setup zum Laden eines Modals. Hier ist ein Beispiel

<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal"> 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

Der Link führt zum Modalcode und nur der Modalcode im letzten Abschnitt ist die Produkt-ID, die hinzugefügt wird, sodass eine eindeutige Anfrage an die API erstellt wird, die dann diese Seite bereitstellt.Ich habe mit dem Code unter diesem Link herumgespielt Modales Laden von jQuery Ajax Bootstrap Jetzt habe ich das Problem, dass anstelle des e.preventDefault Beim Ausführen scheint es ignoriert zu werden und zum Link zu springen. Kann jemand sehen, was ich hier möglicherweise falsch mache?Ich habe nach Fehlern gesucht und es scheint keine Fehler im Jog zu geben, und es kommt nicht in die Klickfunktion, wie ich es gefunden habe, aber ich werde weiterhin versuchen, das Problem zu beheben, während ich auf Antworten warte.

BEARBEITEN:

jQuery wird über diesem Code ordnungsgemäß geladen. Ich verwende jinja2 und alle wichtigen js sind in meiner Basisvorlage und dann in der Verwendung meines Kindes enthalten {{ super() }} Dann werden alle anderen Skripte darunter ausgeführt. Davor wird noch ein weiteres Stück JavaScript ausgeführt, das perfekt funktioniert, und zwar nur für die Datentabelle. Ich werde unten meinen gesamten JS-Abschnitt einfügen.Die Abschnitte „console.log“ dienen nur meinem Debugging, um zu sehen, ob der Code erreicht wird.

jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
        "sAjaxSource": '/api/products/datatables',
        "aoColumns": [
          null, null,null, null, null,
          { "bSortable": false }
        ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
            .each(function(){
                this.checked = that.checked;
                $(this).closest('tr').toggleClass('selected');
            });     
        });
    })

    $(document).ready(function() {
        // Support for AJAX loaded modal window.
        $('[data-toggle="modal"]').click(function(e) {
            sleep(10000)
            e.preventDefault();
            console.log('point two');
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $(url).modal('open');
                console.log('point two');
                sleep(1000);
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal();
                    console.log('point three');
                });
            }
        });
    });

BEARBEITEN:Der Link zum Modal ist nur eine Webapp2-Route. Ich weiß, dass die Route korrekt funktioniert, da sie den Inhalt des Modals lädt, aber ohne Stil, da er zur Hauptseite hinzugefügt werden soll und diesen nicht benötigt.

BEARBEITEN:Beim Lesen der Bootstrap-Dokumente habe ich Folgendes herausgefunden: Es wird nicht mehr auf die Seite geladen, aber das Modal funktioniert auch nicht. Ich glaube, ich habe es richtig gemacht, bin mir aber nicht sicher.

<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" > 
    <i class="icon-zoom-in bigger-130"></i> 
</a> 

Answer 1

Das Attribut data-toggle="modal" ist Teil der Bootstraps-API.Hier spielen noch einige andere Dinge eine Rolle, die Ereignis-Listener mit solchen Elementen verbinden, und was Sie sehen, sind tatsächlich zwei Ereignisse, die stattfinden.Die, die Sie in Ihrem Click-Handler erfassen, und die, die von der Bootstraps-API registriert wird.

Anstatt die Datenattribut-API zu verwenden, um Ihr Modal zu initiieren, erfassen Sie den Klick, wie Sie es bereits tun, und initiieren Sie das Modal dort.Der Init-Code sieht etwa so aus:

$('#myModal').modal({
remote:url
});

Wenn Sie außerdem die Anzeige des Modals auf einen späteren Zeitpunkt (nach init) verzögern möchten, können Sie Folgendes tun:

$('#myModal').modal({
remote:url,
show:false
});

Weitere Informationen finden Sie in der Bootstraps-Dokumentation. Ich habe festgestellt, dass es genau richtig ist.

http://getbootstrap.com/javascript/#modals