2017-06-03 4 views
2

Ich bin eine Website ajaxifying. Mein Menü sollte immer sticky sein (mit dem Sticky-Modul von Foundation). Aber es ist nur sticky auf einer regulären Seite laden, und nicht auf Ajax neu laden (aka beim Navigieren auf der Website)
Ich versuche, das Modul neu zu initialisieren, wenn das Ereignis ajaxComplete passiert, mit der Zeile in der Dokumentation von Foundation zur Verfügung gestellt 6:Zurb Foundation Javascript ReInit Modul funktioniert nicht

$(document).ajaxComplete(function() { 
    Foundation.reInit($('.sticky')); 
    //other code 
}); 

Aber es scheint nicht zu arbeiten, weil ich diesen Fehler in der Konsole:

TypeError: Cannot read property '_init' of undefined 
    at HTMLElement.<anonymous> (foundation.core.js:103) 
    at Function.each (jquery.min.js?ver=2.1.0:2) 
    at o.fn.init.each (jquery.min.js?ver=2.1.0:2) 
    at Object.reInit (foundation.core.js:102) 
    at HTMLDocument.<anonymous> (stickyfooter.js:28) 
    at HTMLDocument.dispatch (jquery.min.js?ver=2.1.0:3) 
    at HTMLDocument.r.handle (jquery.min.js?ver=2.1.0:3) 
    at Object.trigger (jquery.min.js?ver=2.1.0:3) 
    at x (jquery.min.js?ver=2.1.0:4) 
    at XMLHttpRequest.<anonymous> (jquery.min.js?ver=2.1.0:4) 

Was ich nicht verstehen. Was heißt das ? Wie kann ich das Modul nach einem Ajax Reload funktionieren lassen? Die Website in Aktion: http://lesdeuxvagues.com/demo

Antwort

0

Ok neu initialisiert werden würde, so ist es offenbar ein bekanntes Problem in ZURB-Stiftung, das Sticky-Modul funktioniert nicht nach Zerstört werden (obwohl ich nicht weiß, warum es in meinem Fall zerstört wird, weil ich nur andere Inhalte mit AJAX neu lade), scheinen alle anderen Foundation-js-Plugin funktionieren. (siehe: https://github.com/zurb/foundation-sites/issues/9047)
Die Lösung, die ich versuchen werde, ist nur eine andere klebrige Bibliothek zu finden, die sich um dieses spezielle Problem kümmert.

1

Sie haben Ihr Markup nicht veröffentlicht, aber ich habe die Website besucht und sehe keine ".Sticky" -Klasse in Ihrem CSS. Sie rufen

Foundation.reInit() 

auf einem jQuery Selektor. So funktioniert

$('.sticky') 

Wählen Sie etwas auf Ihrer Seite? Warum versuchen Sie nicht:

 Foundation.reInit($('[data-sticky]')) 

, die alle Elemente mit Attributdaten-sticky

+0

Die Kopfzeile, die auch die ID '# Masthead' hat, hat die Klasse sticky! Ich habe diese Zeile '$ ('. Sticky') angewendet. Css ('border', '2px solid red');' in 'ajaxComplete', und es zeigt einen roten Rahmen! Entschuldigung dafür, dass ich das Markup nicht gepostet habe, es ist ziemlich lang, also weiß ich nicht wirklich, welcher Teil relevant wäre! Ich versuchte data-sticky und bekomme den gleichen Fehler wie zuvor. TypeError: Kann die Eigenschaft '_init' von undefined nicht lesen. –

+0

Wenn ich die Seite von Ihrer URL lade, ist die Überschrift sticky (außer auf kleinen Bildschirmen ... müssen Sie hinzufügen . 'stickyOn. small' zu den Daten-Optionen Es bleibt klebrig, bis Sie auf eine Schaltfläche klicken - das ist, wenn der Fehler aufkommt Aber dann auf eine neue Seite, die Sie navigieren, so dass Sie ' $ anrufen müssen (document) .foundation() ' anstelle von' reInit() ' – genestd

+0

Oh danke für das' stickyOn: small', ich wollte dieses Problem auch beheben! Seltsamerweise habe ich versucht, '$ (document) aufzurufen. foundation() ', aber es funktioniert auch nicht, und ich bekomme nicht einmal einen Fehler in der Konsole, also habe ich keine Ahnung, wo es schief geht .. Ich denke , dass vielleicht, weil mein Element bereits als ein 'data-sticky' Attribut vor 'ajaxComplete' es nicht wieder initialisiert wird? (daher das 'reInit()' versuchen), aber offensichtlich bin ich irgendwo falsch! –

Verwandte Themen