Скрытие элемента с помощью мыши на JQuery

Question

Вот моя проблема,

Я хотел бы, чтобы скрыть Div элемент, помеченной идентификатор «professinoal-панели» с помощью JQuery на событие щелчка. Я думал, что это просто, но я новичок в jQuery и немного затруднен с синтаксисом.

$("#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

Я столкнулся с той же проблемой совсем недавно, и для меня решение было вставить функцию мыши внутри document.ready.

Так что для вашего случая:

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

Это просто чтобы убедиться, что страница была успешно загружена код и получила его готовность к выполнению. Как говорится в разделе комментариев, фрагмент кода, кажется, работает отлично, вот почему я попробую document.ready.

Если это не работает, и вы абсолютно уверены в том, что jQuery загружается на вашу страницу, позвольте мне понять что-то еще. :)