Jquery-Warnung wird nicht angezeigt, wenn Dropdown-Listenelement angeklickt wird

Question

Ich versuche, eine Warnmeldung zu erhalten, wenn ein Element in einem Dropdown-Feld ausgewählt ist, das Dropdown-Feld enthält Datenbankelemente. Ich habe ein Tutorial online für den JQuery Teil des Codes gefolgt, wo der Code gut funktionierte und der Alarm auftauchte. Ich frage mich nur, ob jemand helfen kann, warum es nicht mit meinem Code funktioniert? (Der Ajax-Teil hat nichts mit meiner Frage zu tun)

  $(document).on('click', '.theclass', function() { 
       var clicked = $(this).attr("id"); 
       alert(clicked); 
      }); 

      }); 

    </script> 

Answer 1

Ein paar Dinge:

Sie können nicht zu einer externen JavaScript-Source-Bibliothek und betten Sie Ihre eigenen JavaScript in einem einzigen <script> Elemente. Sie müssen zwei <script> Elemente verwenden, wie folgt aus:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><script> 

<script> 
     $(document).on('click', '.studentclass', function() { 
      var clickeditem = $(this).attr("id"); 
      alert(clickeditem); 
     }); 
</script> 

Auch Ihr Code eine zusätzliche }); am Ende enthält, die eine Syntaxfehler ist.

Als nächstes Da Sie das Element dynamisch erstellen, kann es sein, dass der Code zum Verkabeln des Ereignishandlers ausgeführt wird, bevor das Element zum DOM hinzugefügt wurde. In diesem Fall wird event delegation empfohlen. Selbst wenn der aktuelle Code das Element erstellt, bevor das Skript ausgeführt wird, gilt dies als Best Practice, um zu verhindern, dass dies in Zukunft zu einem Problem wird, falls sich die Codestruktur ändert.

Als Anfang dieses Artikels heißt es:

Ereignis Delegation uns erlaubt, ein einzelnes Ereignis-Listener zu befestigen, an einem übergeordnetes Element, das für alle Nachkommen Anpassen eines Selektor ausgelöst wird, ob diese Nachkommen existieren jetzt oder sind in der Zukunft hinzugefügt.

Code ändern zu:

$(document).on("click", ".studentclass", function() { 
    var clickeditem = $(this).attr("id"); 
    alert(clickeditem); 
}); 

Da wir hier nicht wiedergeben kann, .php, ich den Arbeits Code zeigen werde mit einem statischen Element.

$(document).on('click', '.studentclass', function() { 
 
    var clickeditem = $(this).attr("id"); 
 
    alert(clickeditem); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">Find Student ></button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> 
 
     <div id="studentdrop"> 
 
     <div id='students1'> 
 
      <a href="#" id="testing1" class="studentclass">student name</a> 
 
     </div> 
 
     <div id='students2'> 
 
      <a href="#" id="testing2" class="studentclass">student name</a> 
 
     </div>  
 
    </div> 
 

 
    </div> 
 
</div>