jQuery-UI-Skripte funktionieren nicht mehr nach .load() in WordPress

Question

Ich arbeite gerade an einem dynamischen Umfrageformular, das einen Kunden fragt, welche Art von Produkt er will und dann relevante Produkte aus unserem E-Shop anzeigen. Ein bisschen wie nach Parametern suchen, aber persönlicher.

Jetzt versuchte ich es, indem ich jede Seite des Formulars aus einzelnen .php-Dateien, die bestimmte Div auf meiner Seite ersetzen sollen, um zu vermeiden, die ganze Seite neu laden zu müssen.

Ich benutze, oder eher versuche ich jQuery UI Widgets zu verwenden, aber sie funktionieren nicht mehr, wenn ich die nächste Seite mit .load('url') Funktion laden. Console gibt Fehler bei der Initialisierung Widget $(...).slider is not a function(…)

Meine einzelne Seiten in etwa so aussehen

<style> 
    #some styling relevant for the widgets 
</style> 
<script> 


jQuery(function() { 
    $('#back-button').click(function(){ 
      $('#formular-content').load('/eshop/formular/1.php') //this is how I load the pages 
    }); 
    $('#next-button').click(function(){ 
      $('#formular-content').load('/eshop/formular/3.php') 
    }); 
//also these buttons work, so the whole <script> area seems... usable ? 

//code copypasted from http://jqueryui.com/slider/#range 
    $("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 500, 
      values: [ 75, 300 ], 
      slide: function(event, ui) { 
      $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
      } 
    }); 

    $("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 
    }); 
</script> 
    <p> 
     <label for="amount">Price range:</label> 
     <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 

    <div id="slider-range"></div> 
    <a id="back-button" class="ui-button ui-widget ui-corner-all" href="#">back</a> 
    <a id="next-button" class="ui-button ui-widget ui-corner-all" href="#">back</a> 

Das Ganze innerhalb Angabe ist <div> in Seite, die ich Sachen in laden.

Wie ich im Titel sagte, mache ich das in WordPress, also habe ich jquery und jquery-ui richtig eingereiht, es funktioniert tatsächlich auf der ersten Seite, die für Testzwecke identisch ist. Es ist auch eine reguläre Wordpress-Seite, die im Admin-Panel erstellt wurde, und ich hatte Button- und Slider-Funktionen in der functions.js-Datei, die auch in der Theme-Funktionsdatei richtig eingereiht ist.

Also meine Frage ist, wie mache ich die Skripte nach der .load() arbeiten. Ich habe etwas über $.getScript() gelesen und dachte daran, jQuery UI-Dateien zu laden, aber ich bin mir nicht ganz sicher, wie man es mit WP macht und auch wenn es nicht überflüssig ist, die gleiche Datei immer wieder zu laden. Ich bin ziemlich neu in diesen Internet-Programmiersprachen ... vor allem, um sie mit WP zu integrieren.

Auch wenn jemand andere Ideen hat, wie ich das ganze Formular auf andere, bessere/leichtere Weise machen könnte, bin ich für alle Ideen offen.

Vielen Dank für Antworten

Answer 1

Dachte, dass dieses Wordpress verbunden war, stellt sich heraus, es ist nicht.

The solution

TL; DR

jQuery UI-Widgets Initialisierung in <script> Teil der geladenen .php Dokument hinzufügen, ähnliche

<script> 
jQuery(document).ready(function($) { 
    $('.accordion').accordion({ 
     heightStyle: "content", 
     active: false, 
     collapsible: true 
    }); 

}) 
</script> 

ich nicht jQuery(document).ready Ereignis verwendet haben, und es war das Problem .

Dank Guruprasad Rao für Ihre Zeit auf Teamviewer :)

Answer 2

$(...).slider is not a function(…) Fehler heißt es ausdrücklich, dass Sie diesen Code geschrieben haben, bevor Bezug auf die jquery-ui.js Datei zu laden. Also, welches Skript Sie auch laden, legen Sie es vor dem Schreiben Ihrer plugin Initialisierung.

Für die Ereignisse nicht dynamisch geladen Seite durch .load unten zu arbeiten wäre die mögliche Ursache sein:

• Ihre dynamisch geladene Seite des Elements möglicherweise nicht haben Ereignisse mit ihm verbunden, wie in .slider, da sie geladen ist nachdem das Plugin initialisiert wurde.

So müssen Sie eine callback function nach dem .load haben, so dass Sie sich auf die neu geladenen Elemente neu initialisieren können.

Callback-Funktion

$('#back-button').click(function(){ 
    $('#formular-content').load('/eshop/formular/1.php',function(){ 
      $("#slider-range").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
       $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
       } 
      }); 
      //initialise anything here as in .slider() to the `element` which is loaded through ajax. 
    }); 
});