ein Element mit auf Klick mit jQuery

Question

Hier Hiding ist mein Problem,

Ich mag würde das div-Element mit der ID 'professinoal-Panel' mit dem jQuery auf Click-Ereignisse markiert verbergen. Ich dachte, es wäre einfach, aber ich bin neu in jQuery und habe ein wenig Schwierigkeiten mit der Syntax.

$("#hideButton").on("click", function(e){ 
 
     $('#professional-panel').fadeOut('fast'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal-footer"> 
 
     \t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
         <span class="fa fa-file-word-o pull-left"></span> 
 
         <span class="fa fa-file-excel-o pull-left"></span> 
 
         <span class="fa fa-print custom-print pull-left"></span> 
 
         <span class="fa fa-envelope-o custom-print pull-left"></span> 
 
         <input type="button" id="hideButton" value="hide" /> 
 
    \t \t \t  </div> 
 

 
    <div id="professional-panel"> 
 

 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-collaboratorb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-creatorb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-investigatorb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-testerb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-influencerb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
           <div class="photo"> 
 
             <div> 
 
              <img src="../images/problem-solving-decision-makerb.jpg" alt="Expert" class="profile-image"> 
 
             </div> 
 
           </div> 
 
\t \t \t \t \t \t \t </div>

Answer 1

ich in das gleiche Problem lief erst vor kurzem, und für mich war die Lösung, um die Klick-Funktion innerhalb document.ready einzufügen.

Also für Ihren Fall:

$(document).ready(function(){ 
    $("#hideButton").on("click", function(e){ 
     $('#professional-panel').fadeOut('fast'); 
    }); 
}); 

Dies ist nur um sicherzustellen, dass die Seite geladen wurde erfolgreich den Code und bekam es für die Ausführung bereit. Wie andere in den Kommentaren angeben, scheint der Code-Ausschnitt perfekt zu funktionieren, deshalb würde ich das document.ready versuchen.

Wenn dies nicht funktioniert, und Sie sind absolut positiv, dass jQuery auf Ihrer Seite geladen wird, lassen Sie mich etwas anderes herausfinden. :)