0

Ich weiß, es ist dumm sein könnte, aber wie immer Hilfe ist willkommen:Wo jquery-Dateien, einschließlich Event-Handler setzen

I pre.js-Datei mit einem Event-Handler

$('#soon_tasks_header').click(function(){ $('#soon_tasks_content').slideToggle() ; })

es haben ist in application.js erforderlich

 //= require pre 

klicken auf #soon_tasks_header es nicht toggleslide, jedoch den Code in der jQu setzen Die Konsole in meinem Browser funktioniert einwandfrei.

Hinweis:

wenn Getestet habe ich diese in meiner pre.js Datei, es funktionierte gut:

$(document).ready(function(){ 
alert('aaaa') }) 

Ich glaube, ich bin etwas Grundsätzliches in Unordnung, die Jquery-Dateien importiert, wo und wann.

Antwort

0

Das Wichtige, was hier zu verstehen ist, ist, dass Ereignishandler für DOM-Elemente erst installiert werden können, wenn diese DOM-Elemente auf der Seite vorhanden sind. Wenn Sie versuchen, sie zu früh zu installieren, bevor dieser Teil der Seite vom Seitenladeprogramm analysiert wurde, findet jQuery keine übereinstimmenden Elemente auf der Seite, und es werden keine Ereignisbehandlungsroutinen hinzugefügt.

Es gibt mehrere Möglichkeiten, um sicherzustellen, dass der Code, der die Ereignishandler installiert, erst ausgeführt wird, wenn die DOM-Elemente auf der Seite vorhanden sind.

  1. Plazieren der <script>-Tag am Ende des <body> Abschnitt. Dadurch wird sichergestellt, dass alle DOM-Elemente analysiert wurden, bevor das Skript ausgeführt wird.

  2. Fügen Sie Ihren Code in $(document).ready() ein, der jQuery sagt, dass er auf den Aufruf Ihres Codes warten muss, bis die Seite analysiert wurde und alle DOM-Elemente auf der Seite sind.

Wenn Sie nicht die Position der <script> Tags Kontrolle haben oder es ist kompliziert, alle <script> Tags am Ende des <body> Tag wegen Ihrer Umwelt zu erhalten, dann können Sie nur $(document).ready() wie folgt verwenden:

$(document).ready(function() { 
    $('#soon_tasks_header').click(function(){ 
     $('#soon_tasks_content').slideToggle() ; 
    }) 
}); 

Und dies funktioniert, egal wo Sie Ihre Skript-Tag enthalten, solange jQuery bereits zuerst geladen wurde.

+0

Beim Rendern des Inhalts, verliere ich die SlideToggle-Funktion, was bedeutet, dass die $ (Dokument) .ready() nicht erneut aufgerufen wird, so denke ich, dass ich die

0

Ich lege es in

$(document).ready(function(){ 

$('#soon_tasks_header').click(function(){ 
    $('#soon_tasks_content').slideToggle() ; 
    }); 
}) 

und es funktioniert gut. Danke.