jQuery click event не работает

Question

У меня есть это простое событие jQuery click, и по какой-то причине оно не работает. Работает $(document).ready(function() {});, и я могу использовать предупреждения внутри этого; однако фактическое событие клика не работает.

Заранее благодарите меня, и, пожалуйста, будьте спокойны, поскольку у меня не было большого опыта работы с jQuery. Благодаря! :)

Вот мой код:

script.js:

$(document).ready(function() { 
    alert("I can alert here"); 

    $("#the_id").click(function() { 
     alert("I can't alert here"); 
    }); 
}); 

HTML:

// This is an <input> instead of a <button> because I will be creating an AJAX call later 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<input type="submit" id="the_id"> 
<script type="text/javascript" src="script.js"></script> 

Answer 1

input имеет тип submit. Таким образом, он будет запускать сообщение назад, что приводит к обновлению страницы. Используйте event.preventDefault() или измените тип на button.

<input type="button" id="the_id" /> 

Или event.preventDefault(), после чего вам придется использовать AJAX для отправки данных на сервер.

$(document).ready(function() { 
    alert("I can alert here"); 
    $("#the_id").click(function(e) { 
     e.preventDefault(); // prevents the default action of submit 
     alert("I can't alert here"); 
    }); 
}); 

---

Edit: Он должен работать, как есть. Возможно, проблема не в этом.

Answer 2

(пока не может комментировать ...), но вы также можете использовать

$("#the_id").submit(function() { 
    // code will run before submitting form 
});