2016-04-09 10 views
0

Ich habe folgende ejsejs mehrere Klassennamen

<head> 
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet"/> 
<link href="/css/bootstrap.css" rel="stylesheet"/> 
<!-- Custom styles for this template --> 
<link rel="stylesheet" href="/css/quizPage.css" /> 
<script src="/js/jquery-2.1.4.min.js"></script> 
<script src="/js/bootstrap.js"></script> 
<title>{{title}}</title> 
</head> 
<body> 
<script src="text/javascript"> 
    $(document).on('click', '.save_qn', function(){ 
    console.log("Hi i m inside save"); 
}); 
</script> 
<input type="button" class="save_qn btn btn-primary center-block" value="Save"/>    

Aus irgendeinem Grund-Datei, die save_qn Klasse wird durch die jQuery-Selektor nicht erkannt zu werden. Wenn ich die anderen drei Klassen aus dem obigen Klassenattribut entferne, funktioniert es gut. Die Datei bootstrap.css ist in dem Pfad verfügbar, den ich oben im Link-Tag verwendet habe. Irgendwelche Hilfe bitte?

Dies funktioniert, wenn ich die Datei als .html gespeichert hatte. Aber ich glaube nicht, dass das Problem wegen des Dateiformats .ejs ist. Bitte teilen Sie Ihre Eingaben mit.

Dank

Antwort

0

Zwei Probleme hier und sie haben nichts mit EJS zu tun. Übrigens, in Ihrem Code wird kein EJS verwendet. verwenden

  1. Wenn mit jQuery arbeiten, werden alle Ihre jQuery-Logik die jQuery Bereit Methode wie Selektoren zu umschließen, Ereignis-Listener usw. Das ist, weil Sie nicht möchten, dass Ihr Code jQuery auszuführen, bevor die gezielte DOM-Elemente sind: geladen und einsatzbereit. Indem Sie Ihren jQuery-Code in der jQuery-ready-Funktion wie unten gezeigt einschließen, stellen Sie sicher, dass DOM-Elemente für jQuery verfügbar sind.

    <script> 
    $(function() { 
        // all jQ code goes here 
    }); 
    </script> 
    

    oder mit dem ES 2015 Pfeil Funktion Notation:

    <script> 
    $(() => { 
        // all jQ code goes here 
    }); 
    </script> 
    
  2. Die zweite Frage, die ich bemerkte, war, dass Ihr Skript-Tag mit dem jQuery-Ereignis-Listener innerhalb des Körpers der Seite war und nicht in der Kopf. Dies funktioniert jedoch gut, Sie sollten dies bis zum Ende des Körpers, direkt vor dem schließenden -Tag bewegen. Dies stellt auch sicher, dass der gesamte HTML-Code zumindest geladen ist und präsent ist, bevor JavaScript versucht, die Kontrolle zu übernehmen/zu ändern.

+0

Danke, dass geholfen hat. Ja, das ist nur ein Teil meiner EJS-Datei. Es hat keine ejs-Tags. Auch wurde mir klar, dass ich die Savebutton-Überlappung mit dem Absenden-Button beibehalten hatte und wahrscheinlich das Problem verursachte. Wenn ich es etwas auseinander bewegt habe, wurde die Schaltfläche Speichern aktiviert. Ich habe jedoch beide Probleme, die Sie oben hervorgehoben haben, behoben. Danke für Ihre Hilfe. – SamT