Управление кнопками JQuery

Question

Я не могу заставить кнопку работать, и я действительно потерялся относительно того, что происходит не так.

<script>$(document).ready(function() { 
$("signup-button").click(function() { 
    console.log("hello"); 
}); 
});</script> 

<div class="username-input form-horizontal"> 
    <!-- <div class="form-group"> --> 
    <label for="inputUsername" class="col-sm-2 control-label">Username</label> 
    <div class="col-sm-5"> 
    <input type="text" class="form-control" id="inputUsername" placeholder="Username"> 
    </div> 
    </div> 
    <button class="signup-button col-sm-1 control-label">Sign in </button> 

Answer 1

Вам не хватает выбора класса .. $("signup-button") будет искать элемент с кнопкой регистрации тэга. таким образом, вы должны использовать $(".signup-button"):

$(document).ready(function() { 
    $(".signup-button").click(function() { 
    console.log("hello"); 
    }); 
}); 

Answer 2

Проблема заключается в том, что ваш селектор. Вы используете element selectorsignup-button который ищет элемент с тэгом signup-button как <signup-button>..</signup-button>, но в вашем случае signup-button это имя класса, так что вы должны использовать class selector

$(document).ready(function() { 
 
    $(".signup-button").click(function() { 
 
    console.log("hello"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="username-input form-horizontal"> 
 
    <!-- <div class="form-group"> --> 
 
    <label for="inputUsername" class="col-sm-2 control-label">Username</label> 
 
    <div class="col-sm-5"> 
 
    <input type="text" class="form-control" id="inputUsername" placeholder="Username"> 
 
    </div> 
 
</div> 
 
<button class="signup-button col-sm-1 control-label">Sign in</button>

Answer 3

Использование Выбор по идентификатору , для использования #

<script type="text/javascript"> 
 
      $(document).ready(function() { 
 
       $("#signup").click(function() { 
 
        console.log("hello"); 
 
        alert("hello"); 
 
       }); 
 
      }); 
 

 
     </script>

<div class="username-input form-horizontal"> 
 
      <!-- <div class="form-group"> --> 
 
      <label for="inputUsername" class="col-sm-2 control-label">Username</label> 
 
      <div class="col-sm-5"> 
 
       <input type="text" class="form-control" id="inputUsername" placeholder="Username"> 
 
      </div> 
 
     </div> 
 
     <button class="signup-button col-sm-1 control-label" id="signup">Sign in </button> 
 
    </body>