Добавить/удалить класс при нажатии кнопки

Question

Проблемы с добавлением и удалением класса JavaScript при нажатии кнопки. Он просто не выполняет функцию.

Прочитайте несколько решений переполнения стека, ни одна из них не работала для этой конкретной ситуации.

Это элементы:

// CSS 

.hideWelcome{ 
    display: none; 
} 

.autoHide { 
    display: none; 
} 

// JavaScript Hide Welcome 

    $(document).ready(function() {  
     $("#showFormBtn").live("click", function() { 
     $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome"); 
     $("#formInput").toggleClass("autoHide"); 
    }); 
}); 


    // Welcome Div 

    <div class="container"> 
     <div class="row"> 
      <div id="WelcomeDiv" class="one-half column fadeInUp animated" style="margin-top: 25%"> 
       <h4>Make a Difference</h4> 
       <p>Volunteer today!</p> 
       <div class="bounceIn animated"> 
       <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/> 
       </div> 
      </div> 

    // Div to show 

      <div id="formInput" class="one-half column fadeInUp animated autoHide" style="margin-top: 25%"> 
       <h4>HELLO YA'LL</h4> 
       <p>Howdy!</p> 
       <div class="bounceIn animated"> 
        <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

По JQuery 1.7, метод .live() является устаревшим. Используйте .on() для подключения обработчиков событий.

Попробуйте это:

$("#showFormBtn").on("click", function() { 
    $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome"); 
    $("#formInput").toggleClass("autoHide"); 
});